В чем разница между object-fit: contain и object-fit: cover в CSS?

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

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

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