CSS свойство object-fit

Определение и использование

Атрибут objectFit используется для определения того, как следует изменять размер <img> или <video>, чтобы он соответствовал его контейнеру.

Этот атрибут указывает, как содержимое заполняет контейнер. Например, «сохранять пропорции» или «расширяться и занимать как можно больше места».

См. также:

Уроки CSS:CSS object-fit

Руководство по CSS:CSS object-position

Руководство по HTML DOM:Атрибут objectFit

Пример

Обрезайте стороны изображения, сохраняя пропорции, затем заполните пространство:

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Попробуйте сами

CSS синтаксис

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Значение атрибута

Значение Описание
fill Значение по умолчанию. Измените размер содержимого замены, чтобы он занимал весь контентный прямоугольник элемента. При необходимости объект будет растянут или сжат.
contain Измените размер содержимого замены, чтобы он сохранял пропорции и подходил в контентный прямоугольник элемента.
cover Измените размер содержимого замены, чтобы он занимал весь контентный прямоугольник элемента, сохраняя его пропорции. Объект将被 обрезан.
none Содержимое замены не изменяется в размерах.
scale-down Размер содержимого совпадает с none или contain, в зависимости от того, кто из них получит более маленький размер объекта.
initial Установить этот атрибут в его значение по умолчанию. См. также: initial.
inherit Ингерит этот атрибут от родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию: См. также отдельные свойства.
Ингерит: нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.objectFit="cover"

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0