Некоторые способы управления отображением изображений на веб-страницах с помощью свойства object-fit:

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