Altezza: Auto in Internet Explorer 8 e sotto

Question

Verso responsive design, sto usando% s per le immagini, per es .:

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

Questa grande opera, se non in Internet Explorer 8 e sotto. È dovuto al fatto che height: auto fa parte del CSS3, che è supportato solo da IE9 in poi?

E la parte più importante ... qualche suggerimento su come aggirare questo problema? L'unica cosa che riesco a pensare finora è di dargli un massimo di altezza.

Grazie

Answer 1

provare questo:

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. */ 

Entrambe le soluzioni di lavoro. La differenza è che width:inherit fa sì che le immagini riempiano lo spazio dei loro genitori mentre width:auto le supera alle loro dimensioni reali. Vedi fit.css