Как работает масштабирование фонового изображения в современных браузерах?

Масштаб фонового изображения в современных браузерах регулируется с помощью свойства background-size. htmlbook.ru doka.guide

В качестве значения для этого свойства можно указывать:

• Ключевое слово cover. htmlbook.ru doka.guide Размер изображения будет таким, чтобы его ширина и высота поместились в заданную область (например, окно веб-страницы). htmlbook.ru Короткая сторона изображения подстраивается под соответствующую сторону элемента, а длинная закрывает длинную сторону элемента, а остальное, что не попало в поле видимости, обрезается. doka.guide
• Ключевое слово contain. htmlbook.ru doka.guide Картинка масштабируется так, чтобы хотя бы одна сторона картинки целиком поместилась в заданную область. htmlbook.ru
• Явные размеры по горизонтали или вертикали в процентах или других единицах CSS. htmlbook.ru Если указано два значения размера через пробел, то первое значение определяет ширину по горизонтали, а второе — по вертикали. htmlbook.ru
• Ключевое слово auto. htmlbook.ru doka.guide Браузер вычисляет размер автоматически исходя из пропорций картинки. htmlbook.ru

Если вместо одного из размеров использовать ключевое слово auto, то размер изображения остаётся неизменным. doka.guide Это значение по умолчанию. doka.guide