Свойство object-fit определяет, как содержимое изменяемого элемента, такого как <img> или <video>, должно заполнять контейнер относительно его высоты и ширины.

Синтаксис

Для object-fit можно указать одно из нижеперечисленных свойств.

Значения

fill
Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.
contain
Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определен как "помещенный внутрь" блока, ограничиваясь его шириной и высотой.
cover
Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определен как "покрытие" блока, ограничиваясь его шириной и высотой.
none
Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определен с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.
scale-down
Контент изменяет размер, сравнивая разницу между none и contain, для того, чтобы найти наименьший конкретный размер объекта.

Правильный синтаксис

fill | contain | cover | none | scale-down

Пример

HTML Контент

<div>
  <h2>object-fit: fill</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>

  <h2>object-fit: contain</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>

  <h2>object-fit: cover</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>

  <h2>object-fit: none</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>

  <h2>object-fit: scale-down</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>

</div>

CSS Контент

h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

Результат

Технические параметры

Specification Status Comment
CSS Images Module Level 4
Определение 'object-fit' в этой спецификации.
Рабочий черновик Добавлены ключевые слова from-image и flip
CSS Images Module Level 3
Определение 'object-fit' в этой спецификации.
Кандидат в рекомендации Первоначальное определение

Начальное значениеfill
Применяется кзаменяемые элементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Браузерная совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка 31Edge Полная поддержка 16
Замечания
Полная поддержка 16
Замечания
Замечания Edge supports object-fit on img elements only. See Edge issue 13603873 for details.
Firefox Полная поддержка 36IE Нет поддержки НетOpera Полная поддержка 19
Полная поддержка 19
Полная поддержка 11.6
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari Полная поддержка 10WebView Android Полная поддержка 4.4.3Chrome Android Полная поддержка 31Edge Mobile ? Firefox Android Полная поддержка 36Opera Android Полная поддержка 24
Полная поддержка 24
Полная поддержка 11.5
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari iOS Полная поддержка 10Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотри также

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: Roman-Kosov, Danakt, yunusga, Wishmaker888
Обновлялась последний раз: Roman-Kosov,