Позиционирование картинок, свойство object-fit и object-position

При работе с изображениями в веб-разработке перед нами часто встаёт задача показать только определённую часть картинки или изменить её пропорции. CSS предлагает несколько способов решения этой задачи, каждый со своими преимуществами и особенностями применения.

Свойство object-fit

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

Замещаемыми элементами, являются элементы чьи размеры и внешний вид определяются внешним ресурсом. К ним относятся:

<img>
<input type="image">
<embed>
<iframe>
<video>
<canvas>
<object>
<audio>

Свойство object-fit масштабирует, обрезает или растягивает содержимое замещаемых элементов. Свойство хорошо поддерживается в последних версиях Chrome, Firefox и Safari.

fill значение по умолчанию. Содержимое замещаемого элемента полностью заполняет область контейнера тега, используя его высоту и ширину
contain содержимое элемента масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера
cover содержимое элемента обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера
scale-down Содержимое элемента выбирает из двух значений none и contain то значение, которое даёт меньшие размеры
none замещаемое содержимое не изменяет свои собственные размеры, чтобы поместиться и заполнить область контейнера
initial устанавливает это свойство в значение по умолчанию
inherit наследует значение свойства от родительского элемента

Свойство object-position

Свойство object-position используется в сочетании с object-fit и задаёт положение содержимого замещаемого элемента внутри контейнера относительно координатных осей X и Y. Значение по умолчанию 50% 50%. Свойство анимируется и не наследуется.

left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов. Если задано одно ключевое слово, второе примет значение center
px / em/ % указывается два значения, первое определяет расстояние между левой стороной изображения и левым краем элемента-контейнера (по горизонтали), второе значение указывает расстояние между верхней стороной изображения и верхним краем элемента-контейнера (по вертикали). Также можно использовать отрицательные значения для обрезки части контента. Процентное значение рассчитывается относительно содержимого и контейнера, в котором оно расположено. Одновременно можно комбинировать значения в px, em и %
initial устанавливает значение свойства в значение по умолчанию.
inherit наследует значение свойства от родительского элемента