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

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

Вы можете изменить выравнивание содержимого замещаемого элемента внутри его блока с помощью свойства object-position.

Попробуйте

object-fit: fill;

object-fit: contain;

object-fit: cover;

object-fit: none;

object-fit: scale-down;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/plumeria-146x200.jpg" />
</section>

#example-element {
  height: 100%;
  width: 100%;
  border: 2px dotted #888888;
}

Синтаксис

object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;

Значения

Для этого свойства указывается одно из следующих ключевых слов:

contain

Размер замещаемого содержимого изменяется с сохранением его соотношения сторон, чтобы оно уместилось в область содержимого элемента. Объект целиком вписывается в блок с сохранением соотношения сторон, поэтому при несовпадении соотношений сторон объекта и блока вокруг него появятся чёрные полосы.

cover

Размер замещаемого содержимого изменяется с сохранением его соотношения сторон, чтобы оно полностью заполнило область содержимого элемента. Если соотношение сторон объекта не совпадает с соотношением сторон блока, объект будет обрезан.

fill

Размер замещаемого содержимого изменяется так, чтобы оно заполнило область содержимого элемента. Это значение initial. Объект целиком заполнит блок. Если соотношение сторон объекта не совпадает с соотношением сторон блока, объект будет растянут.

none

Размер замещаемого содержимого не изменяется.

scale-down

Размер содержимого изменяется так, как если бы было указано none или contain, в зависимости от того, какое значение приводит к меньшему размеру объекта.

Формальное определение

Формальный синтаксис

object-fit = 
  fill |
  contain |
  cover |
  none |
  scale-down

Примеры

Настройка object-fit для изображения

HTML

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

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

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

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

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

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

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

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

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

  <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
</section>

CSS

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

img {
  width: 150px;
  height: 100px;
  border: 1px solid black;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

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

Результат

Спецификации

Совместимость с браузерами

См. также

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