object-fit
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2020 г..
Свойство object-fit определяет, как содержимое заменяемого элемента, такого как <img> или <video>, должно заполнять контейнер относительно его высоты и ширины.
Интерактивный пример
object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down; <section id="default-example"> <img class="transition-all" id="example-element" src="/shared-assets/images/examples/plumeria-146x200.jpg" /> </section> #example-element { height: 100%; width: 100%; border: 2px dotted #888; } Синтаксис
Для object-fit можно указать одно из нижеперечисленных свойств.
Значения
fill-
Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.
contain-
Смещаемый контент меняет свой размер таким образом, чтобы подстроиться под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определён как "помещённый внутрь" блока, ограничиваясь его шириной и высотой.
cover-
Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определён как "покрытие" блока, ограничиваясь его шириной и высотой.
none-
Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определён с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.
scale-down-
Контент изменяет размер, сравнивая разницу между
noneиcontain, для того, чтобы найти наименьший конкретный размер объекта.
Правильный синтаксис
object-fit =
fill |
none |
[ contain | cover ] || scale-down
Пример
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 |
|---|
| CSS Images Module Level 3 # the-object-fit |
| Начальное значение | fill |
|---|---|
| Применяется к | заменяемые элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |
Совместимость с браузерами
Смотрите также
- Другие свойства CSS, связанные с изображениями (картинками):
object-position,image-orientation,image-rendering,image-resolution. background-size