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;
}
Рис. 1. Фотографии с разным значением object-fit
Примечание¶
Opera до версии 19 поддерживает свойство -o-object-fit
.
Значение по-умолчанию:
object-fit: fill;
Применяется к: К <img>
, <video>
, <object>
, <input type="image">
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!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>