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

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

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

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

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