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

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

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

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

Свойство object-fit масштабирует, обрезает или растягивает содержимое замещаемых элементов. Свойство хорошо поддерживается в последних версиях Chrome, Firefox и Safari. Для браузера IE8-11 можно использовать полифил (библиотеку, добавляющую в старые браузеры поддержку свойств, работающих в современных браузерах).

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

IE: не поддерживает
Firefox: 36.0
Chrome: 31.0
Safari: 7.1 только object-fit, 10.0 полная поддержка
Opera: 19.0
iOS Safari: 8.0 только object-fit, 10.1 полная поддержка
Opera Mini: -o-
Android: 4.4.4
Chrome for Android: 54.0

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

See the Pen BQGdYy by Elena (@html5book) on CodePen.

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

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

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

See the Pen vyQWme by Elena (@html5book) on CodePen.

  • Сергей Романов

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

    • 1) Скачиваете отсюда https://github.com/jonathantneal/fitie/blob/master/lib/fitie.js.
      2) Закидываете на сервер, подключаете к странице.
      3) Добавляете класс, соответствующий одному из трёх значений contain/cover/fill

      img.cover, video.cover {
          object-fit: cover;
      }

      и свойство должно заработать и в Internet Explorer 8 — 11.

      • Дима Антипов

        Я что-то не понял как оно работает. Сделал всё. Копипаснул
        img.cover, video.cover {
        object-fit: cover;
        }
        Или это Edge по другому работает?

        • Этот полифил предназначен только для Internet Explorer. Edge и IE работают на разных движках.

  • Сергей Романов

    Извиняюсь, как раз это делал, работает отлично, Но жалко только для IE. Нашел другой полифил, который подходит к остальным браузерам, но установить не могу, запутано как-то https://github.com/bfred-it/object-fit-images#readme

    был благодарен еслиб помогли)

    • Этот плагин не рабочий. Я писала статью недавно и кроме указанного полифила рабочих не обнаружила.
      Можете попробовать Modernizr, добавить стили для элемента с классом .no-objectfit{}, которые будут имитировать свойство object-fit.
      В этом примере http://codepen.io/nazarelen/pen/yJArmg есть скрипт для адаптивного фонового изображения, а в этом http://codepen.io/nazarelen/pen/ZpWmJm/ — без скрипта.

      • Сергей Романов

        после некоторых танцев с бубном, все-таки удалось заставить работать данный плагин. просто вызвал функцию

        $(function() {objectFitImages('img', {
           watchMQ: true}) ;
        });

        и все заработало

        • Вы тестировали в разных браузерах? У меня их страница с демо не работает ни в IE ни в Safari.

          • Сергей Романов

            Да, что в сафари что в IE заработало как нужно.

          • Отлично! Спасибо, что разобрались.