От автора: свойства object-fit и object-position используется, чтобы указать размер и положение внешних медиа, встроенных в HTML, в основном изображений внутри тега img, но также и содержимого элементов video, iframe или embed.
Свойства не поддерживаются Internet Explorer, поэтому они более полезны для проектов, где это не так важно.
object-fit и object-position могут рассматриваться как параллельные свойствам изображения background-size и background-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.
Значения свойства object-fit, примененные к изображению размером 150 × 150 пикселей.
Это очень похоже на встраивание изображений в фон с помощью свойства background-size.
На практике наиболее полезным является значение object-fit:cover.
Значения object-position
Определяет, где будет располагаться элемент с помощью object-fit. Оно имеет точно такие же значения, как и свойство background-position.
примеры значений свойства object-position.
Давайте рассмотрим примеры значений.
Использовать на практике
Оба свойства очень полезны для указания соотношения сторон, когда на сервере сохраняются изображения разных форм и размеров.
Свойство для видео-фона также работает. А то же самое для iframe нет.
Поддержка браузеров
Поскольку Edge Explorer был обновлен до механизма рендеринга Chromium, только Internet Explorer 11 не поддерживает эти свойства.
На момент написания статьи, Internet Explorer все еще удерживает значительную долю рынка в некоторых странах (например, в Чешской Республике), поэтому вам необходимо будет использовать резервный вариант.
Как решить проблему в 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.
