Разница между свойствами background-size cover и contain в CSS заключается в том, как масштабируется фоновое изображение: 14

1. Cover — изображение растягивается по всей ширине и высоте элемента, при этом, если его размеры не соответствуют размерам элемента, часть изображения обрезается. 23 При использовании cover гарантируется, что весь элемент будет полностью заполнен изображением. 2
2. Contain — фоновое изображение изменяется пропорционально, чтобы подходить размеру элемента. 2 При этом картинка может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров элемента). 5 С использованием contain возможно оставление пустых областей с двух сторон элемента, но вся картинка будет видна. 2

Таким образом, cover ориентирован на полное заполнение элемента изображением, а contain — на то, чтобы картинка целиком поместилась внутрь блока. 14