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

Разница между object-fit: contain и object-fit: cover при отображении изображений на сайте заключается в следующем:

1. object-fit: contain. htmlacademy.ru msiter.ru Изображение пропорционально масштабируется, чтобы целиком поместиться внутри родительского элемента. htmlacademy.ru При этом изображение может иметь пустые области по бокам, сверху или снизу. htmlacademy.ru Задача contain — сохранить пропорции оригинальной картинки, бокс заполнять не обязательно. htmlacademy.ru
2. object-fit: cover. htmlacademy.ru msiter.ru Изображение масштабируется таким образом, чтобы полностью заполнить родительский элемент. htmlacademy.ru Пропорции сохранятся, но всё, что не поместится в размер бокса, обрежется. htmlacademy.ru

Значение contain удобно использовать для галереи фотографий, когда нужно расположить новое фото, сохранив пропорции и не обрезав важные части. htmlacademy.ru Значение cover подходит для ситуаций, когда требуется, чтобы изображение полностью заняло контейнер, даже с возможным обрезанием краёв. sky.pro