0

Estoy teniendo problemas a la hora de hacer que una imagen mucho mas grande que la zona que lo va a contener, ocupe todo el alto de una celda combinada de una tabla que ocupa varias columnas y filas. He tenido varios resultados infructuosos probando tanto a meter codigo en html como en css, pero nada, el normal width="100%" height="100%" no sirve y el align tampoco me ha dado frutos, o la imagen ocupa un ancho desproporcionado, o se limita a la primera fila y no ocupa el resto.

    <table>
    <tr>
        <td style="background-color:DodgerBlue;" colspan=6>Fecha Actual</td>
        <td>C_07</td>
        <td>C_08</td>
     <td>C_09</td>
     <td>C_10</td>
     <td>C_11</td>
     <td>C_12</td>
</tr>
</tr>
<tr>
     <td class="principal" colspan=6 rowspan=6>
        <img align="center" width=300px height="100%" 
        src="../../05ImagenesJPG/BanderaFederacion.jpg" 
        alt="Bandera Federación">
     </td>
     <td>C_07</td>
     <td>C_08</td>
     <td>C_09</td>
     <td>C_10</td>
     <td>C_11</td>
     <td>C_12</td>
</tr>
<tr>
     <td>C_07</td>
     <td>C_08</td>
     <td>C_09</td>
     <td>C_10</td>
     <td>C_11</td>
     <td>C_12</td>
</tr>
<tr>
     <td>C_07</td>
     <td>C_08</td>
     <td>C_09</td>
     <td>C_10</td>
     <td>C_11</td>
     <td>C_12</td>
</tr>
<tr>
     <td>C_07</td>
     <td>C_08</td>
     <td>C_09</td>
     <td>C_10</td>
     <td>C_11</td>
     <td>C_12</td>
</tr>
<tr>
     <td>C_07</td>
     <td>C_08</td>
     <td>C_09</td>
     <td>C_10</td>
     <td>C_11</td>
     <td>C_12</td>
</tr>
<tr>
     <td>C_07</td>
     <td>C_08</td>
     <td>C_09</td>
     <td>C_10</td>
     <td>C_11</td>
     <td>C_12</td>
</tr>
<tr>
     <td>C_01</td>
     <td>C_02</td>
     <td>C_03</td>
     <td>C_04</td>             
     <td>C_05</td>
     <td>C_06</td>
     <td>C_07</td>
     <td>C_08</td>
     <td>C_09</td>
     <td>C_10</td>
     <td>C_11</td>
     <td>C_12</td>
</tr>
</table>

1 respuesta 1

0

Miguel, en la clase "principal" define el espacio que ocupan las celdas combinadas, después aplica a la etiqueta img un width del 100%.

.principal {
  max-width: 230px;
}

img {
  width: 100%;
}

Resultado

1
  • Muchas gracias por tu respuesta, sin embargo creo que es incompatible con: tr, th, td {vertical-align:baseline;} el 30 sep. 2020 a las 11:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.