Атрибут стиля objectFit

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

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

Этот атрибут сообщает, как содержимое должно заполнять контейнер; например, "сохранять пропорции" или "растянуть и занять как можно больше места".

См. также:

CSS УрокиCSS object-fit

CSS РуководствоАтрибут object-fit

Пример

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

document.getElementById("myImg").style.objectFit = "cover";

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

Синтаксис

Возврат атрибута objectFit:

object.style.objectFit

Установить атрибут objectFit:

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

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

Значение Описание
fill По умолчанию. Измените размер содержимого замены для заполнения рамки содержимого элемента. Если необходимо, объект будет растянут или сжат.
contain Измените размер содержимого замены, чтобы поддерживать пропорции и подходить в рамки содержимого элемента.
cover Измените размер содержимого замены, чтобы поддерживать пропорции при заполнении всего содержимого элемента. Объект будет обрезан.
none Содержимое замены не изменяется в размерах.
scale-down Размер содержимого соответствует none или contain, в зависимости от того, кто из них получит более маленький размер объекта.
initial Set this attribute to its default value. See initial.
inherit Инherit this attribute from its parent element. See inherit.

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

Значение по умолчанию: fill
Возвратное значение: Строка, представляющая размер элемента Атрибут object-fit.
Версия CSS: CSS3

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

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

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