В чем разница между различными режимами подгонки фоновых изображений

Разница между различными режимами подгонки фоновых изображений заключается в том, как масштабируется и позиционируется фон. skillbox.ru habr.com

Фиксированное соотношение сторон. habr.com Заключается в установке значения в процентах отступов (padding) элемента. habr.com Например, если фоновое изображение 800 на 450 пикселей, и нужно сделать его фоном с фиксированным соотношением сторон — 16:9. habr.com

Резиновое соотношение сторон. habr.com Например, если большое фоновое изображение отлично смотрится на десктопе, но на мобильном устройстве оно будет слишком мелкое, правильным решением станет уменьшение ширины фона. habr.com Например, картинка шириной 800 на 200 пикселей (4:1) на маленьком экране, при ширине в 300 пикселей, должна уменьшаться до 150 пикселей (2:1). habr.com

Масштаб фонового изображения. htmlbook.ru За управление размером отвечает свойство background-size. htmlbook.ru В качестве значения можно указывать ключевое слово cover, тогда размер изображения будет такой, чтобы его ширина и высота поместились в заданную область (например, окно веб-страницы). htmlbook.ru Ключевое слово contain масштабирует картинку так, чтобы хотя бы одна сторона картинки целиком поместилась в заданную область. htmlbook.ru Кроме того, допустимо указывать явные размеры по горизонтали или вертикали в процентах или других единицах CSS. htmlbook.ru