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

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

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

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

fill
contain
cover
none
scale-down

Значение по умолчанию	fill
Применяется	Ко всем элементам.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.objectFit = "cover";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      object-fit: fill;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства object-fit</h2>
    <h3>Оригинальное изображение:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Значение fill:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

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

Пример со значением "cover", где края изображения обрезаны, а пропорции сохранены:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      object-fit: cover;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства object-fit</h2>
    <h3>Оригинальное изображение:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Значение cover:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

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

Пример со значением "contain":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      object-fit: contain;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства object-fit</h2>
    <h3>Оригинальное изображение:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Значение contain:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

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

Пример со значением "scale-down", где размер изображения уменьшен:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      object-fit: scale-down;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства object-fit</h2>
    <h3>Оригинальное изображение:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Значение scale-down:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

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

Значения

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