altura incorrecta del contenedor de imágenes DIV con valores de porcentaje de ancho

Question

Quiero envolver una imagen en un html DIV y, como quiero que sea totalmente escalable con el tamaño de la ventana, quiero establecer el ancho del DIV en porcentaje de la siguiente manera:

html

<div id="wrapper"> 
    <img src="http://openclipart.org/people/netalloy/rally-car.svg" /> 
</div> 

css

#wrapper { 
    position: absolute; 
    width: 50%; 
} 

#wrapper img { 
    width: 100%; 
} 

La imagen debe determinar la altura de su contenedor. Esto se debe a que el ancho de la imagen está establecido en 100% y la altura de la imagen se calcula en consecuencia manteniendo la relación de aspecto correcta.

El resultado es visible en jsFiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/

Mis preguntas son:

1. ¿Por qué todos los navegadores modernos rinden la envoltura DIV 5px más alto que la imagen interna?
2. ¿Cómo puedo deshacerme de esta brecha de 5 píxeles, sin dejar de configurar todos los tamaños en porcentaje y sin con javascript?

Sorprendentemente, esto sucede en Chrome (21.0.1180.89), Firefox (15.0.1) y IE8, mientras que IE7 hace correctamente, haciendo coincidir la altura de la DIV con la altura de la imagen.

Answer 1

bien, tocar el violín alrededor, he encontrado una buena solución posible:

#wrapper img { 
    display: block; 
    width: 100%; 
    border: 1px dashed red; 

}

El cambio de la pantalla por defecto inline a una pantalla block elimina el problema line-height inmediatamente.

Este enfoque es también semánticamente correcta porque en este caso lo que realmente queremos es una sola imagen envuelta en una DIV sin otros elementos en los mismos, por lo que el concepto de line-height debe estar completamente borrado mediante la visualización de la imagen como un bloque.

Funciona en todos los principales navegadores: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/

Answer 2

Creo que shuold establecer alinear la propiedad para forzar el navegador mostrar correctamente la etiqueta img.

<div id="wrapper"> 
    <img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" /> 
</div> 

DEMO

Answer 3

................

Hola ahora añadir vertical-align:top en su img tag css tiro

como como esto

#wrapper img { 
    width: 100%; 
    border: 1px dashed red; 
    vertical-align:top; // add this line 
} 

live demo

Answer 4

mira esto:

http://jsfiddle.net/5BN4g/29/

Es un asunto line-height :-)

Es necesario:

#wrapper { 
    width: 60%; 
    background-color: #aaa; 
    margin: 50px auto; 
    line-height:0; 
} 

#wrapper img { 
    width:100%; 
    border: 1px dashed red; 
    box-sizing:border-box; 
} 
​ 

utilicé una caja de tamaño para asegurarse de que el ancho de la imagen no se desborde el contenedor

Answer 5

Creo que es porque no se ve como una tabla

he añadido la pantalla: tabla en su código

Y se ve bien ahora, comprobar el enlace

Example Display Table

Answer 6

Su problema es que una imagen - la etiqueta <img>, para ser exactos - es un elemento en línea. Todo lo que necesita hacer es establecer display: block en la imagen y el relleno adicional desaparece. Demo.