Автоматическое изменение размера изображений в зависимости от размера браузера с помощью CSS

Вы хотите, чтобы ваши изображения автоматически изменяли размер при изменении размера окна браузера, но предоставленный код не работает. Давайте найдем решение.

Чтобы сделать изображения гибкими, вам нужно добавить к ним max-width: 100% и height: auto. Однако в IE8 есть ошибка, из-за которой это не работает. Чтобы это исправить, добавьте width: auto\\9 для IE8.

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Любые изображения, добавленные с помощью тега img, теперь будут автоматически изменять размер.

Для иллюстрации приведем пример JSFiddle, для которого не требуется JavaScript. Он совместим с последними версиями Chrome, Firefox и IE (по результатам тестирования).