object-fit

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

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

Примечание: Свойство object-fit не влияет на элементы <iframe>, <embed> и <fencedframe>.

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

Попробуйте

Синтаксис

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;

Свойство object-fit указывается как единственное ключевое слово, выбранное из списка значений ниже.

Значения

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

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

Начальное значение	`fill`
Применяется к	заменяемым элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

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 #000;
  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 Images Module Level 3 # the-object-fit

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`object-fit`	32	79 16–79 Только для элементов `<img>`.	36	1911.6–15	10	32	36	1912–14	10	2.0	4.4.3
`contain`	32	79	36	19	10	32	36	19	10	2.0	4.4.3
`cover`	32	79	36	19	10	32	36	19	10	2.0	4.4.3
`fill`	32	79	36	19	10	32	36	19	10	2.0	4.4.3
`none`	32	79	36	19	10	32	36	19	10	2.0	4.4.3
`scale-down`	32	79	36	19	10	32	36	19	10	2.0	4.4.3

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit