Свойства object-fit и object-position

В конце расскажу, как сделать картинку фоновым изображением.

1. Свойство object-fit

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

Замещаемыми элементами являются элементы, чьи размеры и внешний вид определяются внешним ресурсом. К ним относятся элементы <img> <input type="image">, <embed>, <iframe>, <video>, <canvas> и <object> в случае когда они содержат встраиваемое содержимое, а также элемент <audio>, использующий пользовательские элементы управления.

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

Поддержка браузерами

Значения:

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

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

cover - содержимое элемента обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера.

scale-down - содержимое элемента выбирает из двух значений none и contain то значение, которое даёт меньшие размеры.

none - замещаемое содержимое не изменяет свои собственные размеры, чтобы поместиться и заполнить область контейнера.

initial - устанавливает это свойство в значение по умолчанию.

inherit - наследует значение свойства от родительского элемента.

2. Свойство object-position

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

Значения:

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 - наследует значение свойства от родительского элемента.

Чтобы сделать картинку фоном, родителю img задаем position: relative, а картинке следующие свойства 👇