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

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

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