object-fit

Определение и применение

Свойство object-fit определяет, как изображение или видео помещается внутри области своего элемента. Оно полезно для миниатюр одинакового размера: можно сохранить картинку целиком или заполнить рамку, обрезав края.

Как вписать изображение в рамку и выбрать между обрезкой и свободными полосами — в уроке «Размеры блочных элементов в CSS».

Попробуйте значения object-fit

Сравните результат с оригиналом. Рамка остаётся прежней: меняются пропорции изображения, обрезка или свободное место.

Значение свойства

object-fit: fill

HTML и CSS примера
HTML
<div class="stage">
  <figure>
    <figcaption>Оригинал</figcaption>
    <img
      class="original"
      src="@shared/tony/tony-toy.png"
      alt="Тони с игрушкой"
    />
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <img
      class="demo-target"
      src="@shared/tony/tony-toy.png"
      alt="Тони с игрушкой"
    />
  </figure>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 10px;
  padding: 8px;
}
figure {
  margin: 0;
}
figcaption {
  font-size: 13px;
  margin-bottom: 8px;
}
.original {
  width: 100%;
  max-width: 80px;
  height: auto;
}
.demo-target {
  width: 100%;
  height: 110px;
  border: 2px solid #245a85;
  background: #e4edf3;
  object-fit: fill;
}

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

Спецификация: CSS images

Поддерживается во всех основных браузерах с 2020 года.

Показать браузеры
Совместимостьcss.properties.object-fit
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
object-fit✓32✓79✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10
contain✓32✓79✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10
cover✓32✓79✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10
fill✓32✓79✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10
none✓32✓79✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10
scale-down✓32✓79✓36✓19✓10✓32✓36✓19✓10✓2.0✓4.4.3✓10

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

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

/* Глобальные значения */
object-fit: initial | inherit | unset | revert | revert-layer;

| разделяет варианты.

JavaScript синтаксис:

JavaScript
element.style.objectFit = "cover";

Начальное значение свойства

fill.

Значения свойства

Значения object-fit
Значение Описание
fill Заполняет область содержимого по обеим осям. При несовпадении пропорций картинка растягивается. Начальное значение.
contain Сохраняет пропорции и помещает изображение целиком. С двух сторон могут остаться незаполненные полосы.
cover Сохраняет пропорции и закрывает всю область. Часть изображения может оказаться за её краями.
none Не подгоняет изображение под область элемента; его размер определяется собственными размерами и общими правилами размеров заменяемого содержимого.
scale-down Выбирает меньший результат из none и contain: маленькое изображение не увеличивается ради заполнения рамки.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства object-fit устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Размер элемента и размер картинки

Размер элемента определяет, сколько места он занимает на странице. Его можно задать с помощью width и height, а соотношение сторон — с помощью aspect-ratio. Свойство object-fit определяет, как картинка впишется в эту область, сохраняя размеры самого элемента и его место в раскладке.

Разница между contain и cover видна, когда пропорции области отличаются от пропорций картинки. Например, в квадратной области широкая фотография с contain будет видна целиком, а с cover заполнит всю область, но обрежется по бокам. Если же задать картинке width: 100%; height: auto, высота обычно подстроится под её пропорции. В этом случае смена contain на cover может быть незаметна.

После выбора способа масштабирования можно настроить положение картинки внутри области с помощью object-position. Например, при object-fit: cover значение object-position: center top выравнивает фотографию по центру и верхнему краю. Если картинка обрезается по вертикали, это позволяет сохранить её верхнюю часть.

Такой способ подгонки подходит для изображений и видео. Размер CSS-фона настраивают другим свойством — background-size. К содержимому iframe свойство object-fit не применяется: оно не масштабирует встроенную страницу под размер окна.

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

CSS Images — object-fit.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

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

Картинка целиком или без пустых полос

В рамке находится широкое изображение. Переключайте cover, contain и fill: сравните обрезку, свободное место и пропорции. Размер рамки остаётся прежним.

base.css
CSS
body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.photo {
    display: block;
    border: 3px solid #334155;
    background: #e2e8f0;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Картинка целиком или без пустых полос</title>
  </head>
  <body>
    <img class="photo" src="assets/landscape.svg" alt="Солнце над холмами и домик у правого края" />
  </body>
</html>
style.css
CSS
.photo {
    width: 220px;
    max-width: 100%;
    height: 220px;
    object-fit: cover;
}