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

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

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

С помощью значений свойства содержимое можно настроить на увеличение или уменьшение, сжатие или растяжение, чтобы оно соответствовало заданной ширине и высоте. Существует пять значений:

fill
contain
cover
none
scale-down

Начальное значение	fill
Применяется к	Заменяемые элементы.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS3
Синтаксис DOM	object.style.objectFit = "cover";

Синтаксис

Синтаксис CSS object-fit

css

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

Пример использования свойства object-fit со значением «fill»:

Пример использования свойства object-fit со значением «fill»:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: fill;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>Fill value:</h3>
    <img class="tree" src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>

Try it Yourself »

Результат

CSS object-fit cover

Здесь изображение со примененным значением растягивается, чтобы заполнить контейнер. В следующем примере значение «cover» обрезает боковые части изображения, сохраняет пропорции и также заполняет пространство.

Пример использования свойства object-fit со значением «cover»:

Пример использования свойства object-fit со значением «cover»:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>Cover value:</h3>
    <img class="tree" src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>

Try it Yourself »

В следующем примере изображение со примененным значением сохраняет пропорции оригинального изображения.

Пример использования свойства object-fit со значением «contain»:

Пример использования свойства object-fit со значением «contain»:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>Contain value:</h3>
    <img class="tree" src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>

Try it Yourself »

В нашем последнем примере примененное значение устанавливает изображение в меньшем размере, как если бы были указаны «contain» или «none».

Пример использования свойства object-fit со значением «scale-down»:

Пример CSS object-fit scale-down

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: scale-down;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
    <h3>Scale-down value:</h3>
    <img class="tree" src="https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
fill	Контент изменяется по размеру, чтобы максимально заполнить область содержимого. Это значение по умолчанию для данного свойства.
contain	Пропорции контента масштабируются максимально, оставаясь в пределах границ элемента.
cover	Пропорции контента изменяются так, чтобы заполнить область содержимого элемента. Изображение будет обрезано, чтобы соответствовать области содержимого.
none	Контент не изменяется по размеру.
scale-down	Аналогично значениям none или contain. Контент элемента будет отображаться в меньшем размере.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

CSS свойство object-fit ​

Синтаксис ​

Пример использования свойства object-fit со значением «fill»: ​

Результат ​

Пример использования свойства object-fit со значением «cover»: ​

Пример использования свойства object-fit со значением «contain»: ​

Пример использования свойства object-fit со значением «scale-down»: ​

Значения ​

Практика ​

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

Синтаксис

Пример использования свойства object-fit со значением «fill»:

Результат

Пример использования свойства object-fit со значением «cover»:

Пример использования свойства object-fit со значением «contain»:

Пример использования свойства object-fit со значением «scale-down»:

Значения

Практика