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 Значение элемента наследуется от родительского элемента.

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

31.0+ 16.0 partial 36.0+ 10.0+ 19.0+
11.5-12.1 -o-


Считаете ли это полезным?

Похожие статьи