Переходя к отзывчивому дизайну, я использую% s для изображений, например:
#example img {
width: 100%;
height: auto;
max-width: 690px; // Width of the image uploaded.
}
Это отлично работает, за исключением Internet Explorer 8 и ниже. Это связано с тем, что height: auto является частью CSS3, который поддерживается только IE9?
И самая важная часть... любые предложения по пути решения этой проблемы? Единственное, о чем я могу думать, это дать ему максимальную высоту.
Спасибо
Попробуйте следующее:
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