Перейти к содержанию

object-fit

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

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

Демо

Изображения, фильтры, композиция

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
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;

Значения

fill
Элемент масштабируется, чтобы соответствовать заданным размерам, при этом пропорции игнорируются.
contain
Элемент масштабируется, чтобы целиком уместиться в заданные размеры с соблюдением пропорций.
cover
Элемент увеличивается или уменьшается, чтобы целиком заполнить заданную область с сохранением пропорций.
none
Сохраняются исходные пропорции элемента, установленные значения ширины или высоты не влияют на содержимое.
scale-down
Содержимое имеет такой размер, как если бы не было указано none или contains, в зависимости от того, что привело бы к меньшему размеру конкретного объекта.

Влияние разных значений на фотографии продемонстрировано на рис. 1. Был использован следующий стиль.

1
2
3
4
5
6
img {
  background: #ccc;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

Исходные изображения

fill

contain

cover

none

Рис. 1. Фотографии с разным значением object-fit

Примечание

Opera до версии 19 поддерживает свойство -o-object-fit.

Значение по-умолчанию:

1
object-fit: fill;

Применяется к: К <img>, <video>, <object>, <input type="image">

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

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

Can I Use object-fit? Data on support for the object-fit feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>object-fit</title>
    <style>
      .dolphin img {
        object-fit: cover;
        height: 400px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <p class="dolphin">
      <img src="image/dolphin.jpg" alt="Дельфин" />
    </p>
  </body>
</html>

Комментарии