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 |
 contain |
 cover |
 none |
 scale-down

Пример

HTML Контент

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 Контент

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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨15 апр. 2025 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content