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

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>

Комментарии