Высота: Авто в Internet Explorer 8 и ниже - PullRequest
Новая
       11

Высота: Авто в Internet Explorer 8 и ниже

30 голосов
/ 23 декабря 2011

Переходя к адаптивному дизайну, я использую% s для изображений, например ::10000 

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

Это прекрасно работает, за исключением Internet Explorer 8 и ниже. Это связано с тем, что height: auto является частью CSS3, который поддерживается только в IE9 и далее?

И самая важная часть ... какие-либо предложения по решению этой проблемы? Единственное, о чем я могу думать, это дать ему максимальную высоту.

Спасибо

1 Ответ

57 голосов
/ 12 января 2012

Попробуйте: 

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

ИЛИ: 

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

Оба решения работают.Разница в том, что width:inherit заставляет изображения заполнять пространство их родителей, тогда как width:auto максимизирует их в их реальных размерах.См. fit.css

...