Источник: WebForMyself.com В этой статье мы рассмотрим, как работают object-fit и background-size, когда мы можем их использовать и почему, а также некоторые практические примеры использования и рекомендации. Мы не всегда можем загрузить изображения разного размера в элемент HTML. Если мы используем ширину и высоту, которые не пропорциональны соотношению сторон изображения, изображение может быть сжато или растянуто. Это плохо, и это можно решить либо с помощью object-fit элемента img, либо с помощью background-size...

Свойство background-size масштабирует фоновое изображение согласно заданным размерам. Может принимать следующие значения: Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки. Свойства background-clip и background-origin Свойства background-clip и background-origin очень похожи и задают принцип размещения фона или фоновой картинки относительно элемента: часть фона будет залазить под границу, фон не будет залазить под границу или фон будет размещаться только над содержимым элемента (то есть padding отодвинет фон)...