Некоторые способы масштабирования фоновых изображений на сайте с помощью CSS:
- Установка значения property background-size равным cover. 1 Изображение будет масштабировано так, чтобы его ширина и высота поместились в заданную область (например, окно веб-страницы). 2
- Использование ключевого слова contain. 2 Картинка будет масштабирована так, чтобы хотя бы одна сторона целиком поместилась в заданную область. 2
- Указание явных размеров по горизонтали или вертикали в процентах или других единицах CSS. 2 Если указано два значения размера через пробел, то первое значение определяет ширину по горизонтали, а второе — по вертикали. 2
- Использование ключевого слова auto. 2 Браузер вычислит размер автоматически, исходя из пропорций картинки. 2
Также для адаптации под разные размеры экранов можно использовать медиазапросы. 1