Свойства CSS object-fit и object-position: Обрезка изображений, встроенных в HTML

Свойства CSS object-fit и object-position: Обрезка изображений, встроенных в HTML

От автора: свойства object-fit и object-position используется, чтобы указать размер и положение внешних медиа, встроенных в HTML, в основном изображений внутри тега img, но также и содержимого элементов video, iframe или embed.

Свойства не поддерживаются Internet Explorer, поэтому они более полезны для проектов, где это не так важно.

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

Свойства CSS object-fit и object-position: Обрезка изображений, встроенных в HTML

Свойства object-fit и object-position определяют, как ведет себя встроенный медиа, когда его выделенное пространство становится меньше или больше.

Давайте рассмотрим это на простом примере. У нас есть следующий HTML:

<img class="img img--cut" src="image-300x300.jpg" width="300" height="200" alt="Image…">

CSS:

.img--cut { object-fit: cover; object-position: bottom;
}

Давайте я поясню это:

Изображение имеет естественные размеры 300×300 пикселей, но может занимать в HTML высоту только 200 пикселей, см. свойство height.

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

object-position:bottom задает выравнивание по нижнему краю элемента img. См object-position.

Значения object-fit

Спецификация определяет, как подгонять внешние медиа к области, заданной в HTML или CSS свойствами width и height.

Свойства CSS object-fit и object-position: Обрезка изображений, встроенных в HTML

Значения свойства object-fit, примененные к изображению размером 150 × 150 пикселей.

Это очень похоже на встраивание изображений в фон с помощью свойства background-size.

Свойства CSS object-fit и object-position: Обрезка изображений, встроенных в HTML

На практике наиболее полезным является значение object-fit:cover.

Значения object-position

Определяет, где будет располагаться элемент с помощью object-fit. Оно имеет точно такие же значения, как и свойство background-position.

Свойства CSS object-fit и object-position: Обрезка изображений, встроенных в HTML

примеры значений свойства object-position.

Давайте рассмотрим примеры значений.

Свойства CSS object-fit и object-position: Обрезка изображений, встроенных в HTML

Использовать на практике

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

Свойство для видео-фона также работает. А то же самое для iframe нет.

Поддержка браузеров

Поскольку Edge Explorer был обновлен до механизма рендеринга Chromium, только Internet Explorer 11 не поддерживает эти свойства.

На момент написания статьи, Internet Explorer все еще удерживает значительную долю рынка в некоторых странах (например, в Чешской Республике), поэтому вам необходимо будет использовать резервный вариант.

caniuse.com/object-fit

Как решить проблему в Internet Explorer:

Вместо object-fit/object-position встроить изображение в фон с помощью background-size/background-position. Альтернативно, вы можете поэкспериментировать со свойством transform и с абсолютным позиционированием (см. StackOverflow).

Для IE11 используйте полифилл — fregante/object-fit-images. Я не очень рекомендую этот метод, потому что он замедляет производительность рендеринга в уже медленном Explorer.

Определите не поддерживающий браузер (например, с помощью библиотеки Modernizr) и разверните резервное решение. Например, на StackOverflow предлагается решение для изменения img в svg и решения проблемы в нем.

Автор: Martin Michálek

Источник: https://medium.com

Редакция: Команда webformyself.