Altura: Auto en Internet Explorer 8 y por debajo

Question

Hacia el diseño de respuesta, estoy usando% s para las imágenes, por ejemplo .:

#example img { 
    width: 100%; 
    height: auto; 
    max-width: 690px; // Width of the image uploaded. 
} 

Esto funciona muy bien, excepto en Internet Explorer 8 y por debajo. ¿Esto se debe a que height: auto es parte de CSS3, que solo es compatible con IE9 en adelante?

Y la parte más importante ... ¿alguna sugerencia sobre cómo evitar este problema? Lo único que se me ocurre hasta ahora es darle una altura máxima.

Gracias

Answer 1

Prueba esto:

img { 
    width: inherit; /* Make images fill their parent's space. Solves IE8. */ 
    max-width: 100%; /* Add !important if needed. */ 
    height: auto; /* Add !important if needed. */ 
} 

O:

img { max-width:100%; height: auto; } /* Enough everywhere except IE8. */ 
@media \0screen {img { width: auto }} /* Prevent height distortion in IE8. */ 

Ambas soluciones de trabajo. La diferencia es que width:inherit hace que las imágenes llenen el espacio de sus padres, mientras que width:auto las maximiza en sus dimensiones reales. Ver fit.css