object-fit
Свойство object-fit
определяет, как содержимое заменяемого элемента, такого как <img>
или <video>
, должно заполнять контейнер относительно его высоты и ширины.
Интерактивный пример
Синтаксис
Для object-fit
можно указать одно из нижеперечисленных свойств.
Значения
fill
-
Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.
contain
-
Смещаемый контент меняет свой размер таким образом, чтобы подстроиться под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определён как "помещённый внутрь" блока, ограничиваясь его шириной и высотой.
cover
-
Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определён как "покрытие" блока, ограничиваясь его шириной и высотой.
none
-
Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определён с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.
scale-down
-
Контент изменяет размер, сравнивая разницу между
none
иcontain
, для того, чтобы найти наименьший конкретный размер объекта.
Правильный синтаксис
Пример
HTML Контент
<div>
<h2>object-fit: fill</h2>
<img src="mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
<img src="mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
<h2>object-fit: contain</h2>
<img src="mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
<img src="mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
<h2>object-fit: cover</h2>
<img src="mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
<img src="mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
<h2>object-fit: none</h2>
<img src="mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
<img src="mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
<h2>object-fit: scale-down</h2>
<img src="mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
<img src="mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
</div>
CSS Контент
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
margin-top: 10px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
Результат
Технические параметры
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 4 Определение 'object-fit' в этой спецификации. |
Рабочий черновик | Добавлены ключевые слова from-image и flip |
CSS Images Module Level 3 Определение 'object-fit' в этой спецификации. |
Кандидат в рекомендации | Первоначальное определение |
Начальное значение | fill |
---|---|
Применяется к | заменяемые элементы |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Браузерная совместимость
BCD tables only load in the browser
Смотрите также
- Другие свойства CSS, связанные с изображениями (картинками):
object-position
,image-orientation
(en-US),image-rendering
(en-US),image-resolution
(en-US). background-size