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

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

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

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

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

Спасибо

Ответы

Ответ 1

Попробуйте следующее:

img {
  width: inherit;  /* Make images fill their parent 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