Масштаб фонового изображения в современных браузерах регулируется с помощью свойства background-size. 24
В качестве значения для этого свойства можно указывать:
- Ключевое слово cover. 24 Размер изображения будет таким, чтобы его ширина и высота поместились в заданную область (например, окно веб-страницы). 2 Короткая сторона изображения подстраивается под соответствующую сторону элемента, а длинная закрывает длинную сторону элемента, а остальное, что не попало в поле видимости, обрезается. 4
- Ключевое слово contain. 24 Картинка масштабируется так, чтобы хотя бы одна сторона картинки целиком поместилась в заданную область. 2
- Явные размеры по горизонтали или вертикали в процентах или других единицах CSS. 2 Если указано два значения размера через пробел, то первое значение определяет ширину по горизонтали, а второе — по вертикали. 2
- Ключевое слово auto. 24 Браузер вычисляет размер автоматически исходя из пропорций картинки. 2
Если вместо одного из размеров использовать ключевое слово auto, то размер изображения остаётся неизменным. 4 Это значение по умолчанию. 4