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