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

background-size: cover заставляет изображение растягиваться по всей ширине и высоте элемента. 3 Если размеры картинки не соответствуют размерам элемента, то часть изображения обрезается. 3 При этом гарантируется, что весь элемент будет полностью заполнен изображением. 3

background-size: contain изменяет фоновое изображение пропорционально, чтобы оно подходило размеру элемента. 3 При этом возможно оставление пустых областей с двух сторон элемента. 3 Однако картинка всегда будет видна вся, хоть и в уменьшенном варианте. 4

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