Уменьшайте (но не увеличивайте) изображения, используя CSS, чтобы подогнать контейнер div в IE9 (max-width: 100% fix)

Question

Я не могу использовать JS, это должно быть заархивировано только CSS. Контейнер (DIV) - это элемент auto-width (гибкий) «table-cell».

Я бы хотел уменьшить изображение только тогда, когда его ширина больше контейнера (пользователь может изменить размер окна - вот причина).

Я использовал код, показанный ниже, но он работает только в IE7.

max-width: 100%;
height: auto;
width: auto\9;

Я пытался найти любое исправление для IE9, но безуспешно.

Answer 1

Ваш max-width должен быть установлен на размер изображения, а затем от width до 100%, например:

img {
    width: 100%;
    max-width: 500px;
    height: auto;
}

Конечно, это означает, что ваш max-width должен быть динамически установлен на основе загружаемого изображения, что может быть непрактично.

Answer 2

Я наткнулся на этот старый вопрос, пытаясь сделать то же самое, что и ОП. Я отвечаю за всех, кто может приземлиться здесь. Изучив http://jsfiddle.net/SAada/2/, упомянутый ОП, я нашел интересное решение:

установка

height: auto;

гарантирует, что изображение не будет растягиваться / масштабироваться. В то же время настройка

max-width: 100%

гарантирует, что если ширина родительского элемента меньше ширины изображения, изображение будет уменьшено.

Таким образом, комбинация, которая работает для меня:

img {
    max-width: 100%;
    height: auto;
}

О, и после еще нескольких поисков я обнаружил, что эта техника также используется Bootstrap для адаптивных изображений!