Свойство object-fit в CSS позволяет адаптировать изображения под разные размеры экрана, сохраняя их пропорции. 15

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

• Fill. 24 Изображение заполняет всю доступную область элемента, при этом его пропорции могут быть искажены. 2 Задача fill — растянуть картинку до размеров её бокса. 2
• Contain. 24 Изображение пропорционально масштабируется, чтобы целиком поместиться внутри родительского элемента. 2 При этом изображение может иметь пустые области по бокам, сверху или снизу. 2 Задача contain — сохранить пропорции оригинальной картинки, бокс заполнять не обязательно. 2
• Cover. 23 Изображение масштабируется таким образом, чтобы полностью заполнить родительский элемент. 2 Пропорции сохранятся, но всё, что не поместится в размер бокса, обрежется. 2
• None. 34 Картинка отображается без изменения пропорций или размеров. 3
• Scale-down. 34 Картинка отображается без изменения пропорций или размеров, если её размер меньше элемента, иначе подстраивает размеры так, чтобы изображение помещалось внутри целиком без нарушения пропорций. 3

Таким образом, свойство object-fit помогает избежать деформаций изображений при их подстройке под нужные размеры. 14