Свойство object-fit в CSS при работе с изображениями определяет, как содержание элемента (например, img или video) должно быть изменено, чтобы соответствовать размеру его контейнера. 2

Некоторые значения свойства object-fit и их влияние на отображение изображений:

• fill. 14 Изображение заполняет всю доступную область элемента, при этом его пропорции могут быть искажены. 1 Задача fill — растянуть картинку до размеров её бокса. 1
• contain. 14 Изображение пропорционально масштабируется, чтобы целиком поместиться внутри родительского элемента. 1 При этом изображение может иметь пустые области по бокам, сверху или снизу. 1 Задача contain — сохранить пропорции оригинальной картинки, бокс заполнять не обязательно. 1
• cover. 34 Картинка без нарушения пропорций заполнит всю доступную область, обрезая всё ненужное. 3
• none. 34 Картинка отображается без изменения пропорций или размеров. 3
• scale-down. 3 Браузер сравнивает размеры картинки со значением none и со значением contain и выбирает одно из этих значений, деформируя картинку соответствующим образом. 3

Свойство object-fit работает только если картинке задан хотя бы один размер: ширина или высота. 3 Иначе браузер не понимает, в какую область нужно вписать картинку. 3