Изменение размера изображения по размеру окна браузера без искажений

Изменение размера изображения по размеру окна браузера — распространенная задача, решения которой кажутся простыми. Однако соблюдение особых требований, таких как сохранение пропорций и предотвращение обрезки, может вызвать проблемы.

Решение без полос прокрутки и Javascript (только CSS)

Это решение использует CSS Grid, чтобы гарантировать, что контейнер изображения занимает всю высоту окна. Затем изображение устанавливается так, чтобы оно помещалось в этом контейнере по горизонтали и вертикали, сохраняя соотношение сторон и избегая добавления полос прокрутки.

Решение с помощью JQuery

Если доступен Javascript , другой подход:

Здесь высота основного текста устанавливается в соответствии с высотой окна, обеспечивая правильную работу свойства max-height изображения. Событие изменения размера окна также обрабатывается для автоматической регулировки высоты тела и размера изображения при изменении размера окна.