object-fit¶

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

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

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

Синтаксис¶

object-fit: fill | contain | cover | none;

Значения¶

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

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

img {
  background: #ccc;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

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

fill

contain

cover

none

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

Примечание¶

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

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

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.

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

<!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>