В чем разница между значениями contain и cover в свойстве background-size?

Разница между значениями contain и cover в свойстве background-size заключается в том, как происходит масштабирование фонового изображения. htmlacademy.ru telegra.ph

Cover указывает, что фоновое изображение будет растянуто по всей ширине и высоте элемента. htmlacademy.ru При этом сохраняется исходное соотношение сторон, но если размеры изображения не соответствуют размерам элемента, то часть картинки обрезается. htmlacademy.ru telegra.ph В итоге гарантируется, что весь элемент будет полностью заполнен изображением. htmlacademy.ru

Contain, в свою очередь, предполагает, что фоновое изображение будет изменено пропорционально, чтобы подходить размеру элемента. htmlacademy.ru При этом исходное соотношение сторон сохраняется, но картинка будет растягиваться или сжиматься по мере необходимости, чтобы остаться в пределах ширины и высоты элемента. telegra.ph В итоге вся картинка будет видна в элементе, но возможно оставление пустых областей с двух сторон элемента. htmlacademy.ru

Таким образом, cover больше подходит для ситуаций, когда важно, чтобы изображение занимало всю доступную площадь элемента, а contain — когда нужно, чтобы картинка всегда отображалась в поле зрения, но при этом могли оставаться пустые области. stackoverflow.com