object-fit

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

Интерактивный пример

Синтаксис

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

Значения

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

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

object-fit = 
  fill        | (en-US)
  contain     | (en-US)
  cover       | (en-US)
  none        | (en-US)
  scale-down

Пример

HTML Контент

<div>
  <h2>object-fit: fill</h2>
  <img src="mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>

  <img src="mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>

  <h2>object-fit: contain</h2>
  <img src="mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>

  <img src="mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>

  <h2>object-fit: cover</h2>
  <img src="mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>

  <img src="mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>

  <h2>object-fit: none</h2>
  <img src="mdn_logo_only_color.png" alt="MDN Logo" class="none"/>

  <img src="mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>

  <h2>object-fit: scale-down</h2>
  <img src="mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>

  <img src="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 type	discrete

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

BCD tables only load in the browser

Смотрите также

Другие свойства CSS, связанные с изображениями (картинками): object-position, image-orientation (en-US), image-rendering (en-US), image-resolution (en-US).
background-size