¿Cómo encajo una imagen en la celda td
de una tabla? [HTML puro]
He probado el siguiente código para colocar una imagen en la celda td
de la tabla.
El código HTML está aquí:
<table border="1" bordercolor="#aaa" cellspacing="0" cellpadding="0">
<tr>
<td><img width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" /></td>
</tr>
</table>
Como puede ver en la siguiente captura de pantalla y en [JsFiddle DEMO][1], esa imagen no cabe en la celda td
.
Captura:
¿Qué estoy haciendo mal?
Cualquier sugerencia sería genial.
El contenido en línea deja espacio en la parte inferior para los caracteres que descienden (j, y, q):
https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps
Hay un par de correcciones:
Usar display: block;
<img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
o use vertical-align: bottom;
<img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
Se trata de display: block
:)
Actualizado:
Ok por lo que tiene la tabla, tr y td etiquetas:
<table>
<tr>
<td>
<!-- your image goes here -->
</td>
</tr>
</table>
Digamos que su table
o td
(lo que sea definir su anchura) tiene la propiedad width: 360px;
. Ahora, cuando intenta reemplazar el comentario html con la imagen real y establecer que la propiedad de la imagen, por ejemplo, width: 100%;
que debe llenar completamente la celda td
se enfrentará al problema.
El problema es que la celda de la tabla (td
) no está correctamente rellenada con la imagen. Notarás el espacio en la parte inferior de la celda que tu imagen no cubre (son como 5px de relleno).
¿Cómo resolver esto de la forma más sencilla?
Estás trabajando con las tablas, ¿verdad? Sólo tienes que añadir la propiedad display a tu imagen para que tenga lo siguiente:
img {
width: 100%;
display: block;
}