He creado un <div> con width:10em y height:5em.
Ahora me gustaría mostrar un <img> (imagen GIF) en este <div> con el mismo tamaño exacto. Pero aparentemente no "sabe" la unidad em. Muestra la imagen en 10x5 píxeles en su lugar.¿Cómo puedo mostrar una imagen usando la unidad "em"?
¿Cómo puedo visualizar este <img> usando la unidad "em"?
Usar este código:
<html>
<body>
<p>This is 10em x 5em</p>
<div style="width:10em; height:5em;">
<img style="width:10em; height:5em;" src="logo.png" />
</div>
</body>
</html>
Funciona en Firefox 3.5, Internet Explorer 8 y Opera 10.0 beta en Windows XP.
No tiene sentido repetir exactamente los mismos valores de ancho/alto. También puedes: a) Eliminar el div que lo encierra ob) cambiar los valores de la imagen al 100%. –
Puede img estilo con CSS:
img.MyImage {
width: 10em;
height: 5em;
}
<img class="MyImage" src="image.gif" />
Qué margen de beneficio ha utilizado? ¿Intentó y tamaño usando CSS, o simplemente con los atributos de ancho y alto (que solo toman dimensiones en píxeles) –
con qué navegador lo probó? – bjelli