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

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

Таким образом, object-fit: contain используется, когда ограничена область показа и изображение точно не должно изменяться, а object-fit: cover — когда требуется, чтобы изображение полностью заняло контейнер, даже с возможным обрезанием краёв. 3