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.

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

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

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

Давайте разбираться:

• наша картинка имеет исходный размер 300*300 пикселей, но в HTML указано, что она может занимать высоту 200 пикселей, при этом ее ширина задана в 300 пикселей.
• в css стилях object-fit:cover указывает, что изображение должно быть растянуто по всей области элемента img так, чтобы не осталось свободного места.
• а свойство object-position:bottom указывает, что при этом изображение должно выравниваться по нижнему краю элемента img

Значения свойства object-fit

Свойство object-fit указывает как именно нужно размещать встроенный медиа-контент в области размеры которой заданы свойствами в Css или HTML.

Это очень похоже на то, как мы применяем свойство background-size для того, чтобы задать расположение фона элемента.

Вот варианты значений для свойства object-fit:

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

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

Значения свойства object-position

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

Давайте рассмотрим значения с примеров:

• 50% 50% (default) - располагает изображение по центру контейнера
• 0 0 - располагает изображение в верхнем левом углу
• 0 -50px - располагает изображение со смещением 0px относительно верха контейнера и смещает его влево на 50px за пределы контейнера
• top right - располагает изображение в верхнем правом углу
• bottom - располагает относительно нижнего края. Вторым значением берется значение по умолчанию, то есть center

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

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

Свойство object-fit для тега video работает очень хорошо, что может очень пригодиться при использовании видео для фона на сайте. К сожалению для iframe оно не работает.

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

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

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

caniuse.com/object-fit

Как решать проблемы с поддержкой свойств в Internet Explorer

1. Вместо использования object-fit/object-position для объекта, используйте изображение в качестве фона и примените к нему background-size/background-position. В качестве альтернативного варианта можн использвать свойства трансформации в сочетании с абсолютным позиционированием (решение на StackOverflow)
2. Для IE11 можно использовать полифил fregante/object-fit-images. Но я не очень рекомендую использовать этот вариант, потому что это замедлит рендеринг в итак не самом быстром браузере.
3. Определять браузеры, которые не поддерживают наши свойства (например с помощью библиотеки Modernizr) и применять к ним отдельный вариант кода. Например на StackOverflow есть решение, в котором предлагают изменять тег img на svg и решать проблему адаптации уже с ним.