web-dev-qa-db-fra.com

Hauteur: Auto dans Internet Explorer 8 et inférieur

Vers une conception réactive, j'utilise% s pour les images, par exemple:

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

Cela fonctionne très bien, sauf dans Internet Explorer 8 et versions antérieures. Est-ce dû à height: auto faisant partie de CSS3, qui n'est pris en charge que par IE9?

Et la partie la plus importante ... des suggestions pour contourner ce problème? La seule chose à laquelle je peux penser jusqu'à présent est de lui donner une hauteur maximale.

Merci

imagecssresponsive-design
30
SparrwHawk

Essaye ça:

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

OU:

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

Les deux solutions fonctionnent. La différence est que width:inherit fait que les images remplissent l'espace de leurs parents tandis que width:auto les maximise à leurs dimensions réelles. Voir fit.css

57
ryanve