Преимущества значений cover и contain для свойства background-size:
- cover: изображение полностью покрывает область контейнера, показывая как можно больше изображения, но не искажая его. 1 Если пропорции фона отличаются от элемента, изображение обрезается по вертикали или горизонтали. 3
- contain: всё изображение помещается в контейнер, даже если его естественные размеры больше, чем контейнер. 1 При этом картинка может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров элемента). 5
Недостатки значения cover: какая-то часть изображения может обрезаться, так как оно не всегда помещается целиком. 5 Недостатки значения contain: блок в общем случае будет покрыт картинкой не целиком, но картинка всегда будет видна вся, хоть и в уменьшенном варианте. 5
Выбор между этими значениями зависит от конкретных требований и предпочтений разработчика.