Свойство CSS object-fit
Используйте свойство CSS object-fit, чтобы задать способ подгонки элемента к контейнеру. Значения и примеры.
Свойство CSS object-fit управляет тем, как замещаемый элемент — например <img> или <video> — масштабируется, чтобы заполнить свой блок содержимого. Оно является аналогом background-size для изображений и видео: вместо того чтобы растягивать или искажать медиаконтент, вы сами решаете — должен ли он заполнить блок, вписаться в него, быть обрезан или остаться без изменений.
На этой странице рассматривается, что делает object-fit, когда его применять, каждое из значений с интерактивным примером, а также связанные свойства для тонкой настройки результата.
Зачем использовать object-fit
Когда вы задаёте фиксированные width и height изображению, соотношение сторон которого не совпадает с заданным блоком, браузер по умолчанию растягивает изображение — лица сплющиваются, логотипы искажаются. object-fit решает эту проблему. Оно позволяет сохранить заданные размеры блока (что важно для предсказуемых макетов и сеток), указав браузеру, как привести естественное соотношение сторон изображения в соответствие с этим блоком:
- Используйте
coverдля главных баннеров, миниатюр и аватаров — заполнение блока с обрезкой выходящей за края части без каких-либо искажений. Это наиболее часто используемое значение. - Используйте
contain, когда необходимо показать изображение целиком (логотипы, снимки товаров), даже если при этом остаётся пустое пространство. - Используйте
fill(значение по умолчанию) только тогда, когда вы действительно хотите растянуть изображение точно по размеру блока.
По умолчанию изображение центрируется внутри блока. Чтобы управлять тем, какая часть изображения остаётся видимой при обрезке с помощью cover, сочетайте object-fit с object-position.
| Начальное значение | fill |
|---|---|
| Применяется к | Замещаемым элементам (<img>, <video>, <object> и др.). |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.objectFit = "cover"; |
Синтаксис
Синтаксис CSS object-fit
object-fit: fill | contain | cover | scale-down | none | initial | inherit;Во всех примерах ниже блок имеет ширину 200px и высоту 400px — высокий узкий блок, — тогда как исходное изображение является горизонтальным. Именно это несоответствие делает поведение каждого значения наглядным.
Пример свойства object-fit со значением "fill"
fill (по умолчанию) игнорирует соотношение сторон и растягивает изображение точно по размеру блока, из-за чего дерево выглядит сплющенным.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Fill value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Результат
Изображение растянуто по блоку с искажением. Следующее значение, cover, устраняет это, обрезая вместо растяжения.
Пример свойства object-fit со значением "cover"
cover масштабирует изображение так, чтобы оно полностью заполнило блок с сохранением соотношения сторон, обрезая выходящую за края часть. Искажений нет, но края могут быть срезаны. Это идеальный выбор для миниатюр и главных баннеров.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Cover value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Пример свойства object-fit со значением "contain"
contain масштабирует изображение так, чтобы оно полностью вписалось внутрь блока с сохранением соотношения сторон, — таким образом, изображение всегда виднеется целиком. Поскольку блок выше, чем широко изображение, сверху и снизу появляются пустые полосы (эффект «почтовых ящиков»).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Contain value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Пример свойства object-fit со значением "none"
none сохраняет естественный (внутренний) размер изображения и полностью игнорирует размеры блока. Изображение центрируется, а часть, выходящая за пределы блока, обрезается. Используйте это значение, когда необходимо сохранить исходный размер в пикселях.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: none;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>None value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Пример свойства object-fit со значением "scale-down"
scale-down сравнивает результат none и contain и использует тот, при котором отображаемое изображение получается меньше. На практике для изображений крупнее блока поведение соответствует contain, а для изображений меньше блока — none. Это безопасный способ уменьшить слишком крупный медиаконтент без масштабирования маленьких изображений вверх.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Scale-down value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Значения
| Значение | Описание |
|---|---|
| fill | По умолчанию. Растягивает содержимое, чтобы точно заполнить блок, игнорируя соотношение сторон (изображение может быть искажено). |
| contain | Масштабирует содержимое, чтобы оно вписалось в блок с сохранением соотношения сторон; могут появиться пустые области (эффект «почтовых ящиков»). |
| cover | Масштабирует содержимое, чтобы заполнить блок с сохранением соотношения сторон; выходящие за края части обрезаются. |
| none | Сохраняет естественный размер содержимого, игнорируя блок; центрируется и обрезается при выходе за пределы. |
| scale-down | Отображает содержимое как меньшее из none и contain — никогда не масштабирует изображение вверх. |
| initial | Устанавливает свойство в значение по умолчанию (fill). |
| inherit | Наследует значение свойства от родительского элемента. |
Поддержка браузерами и советы
object-fit поддерживается во всех современных браузерах. Обратите внимание на следующее:
- Свойство влияет только на замещаемые элементы (
<img>,<video>,<object>, встроенный SVG). На<div>оно не действует — там следует использоватьbackground-size. - Элемент по-прежнему занимает заданные
width/height;object-fitлишь меняет способ отрисовки содержимого внутри блока. - Сочетайте свойство с
object-position, чтобы выбрать, какая часть изображения остаётся видимой при использованииcoverилиnone. - Если обрезанная часть должна быть скрыта, блок уже делает это; подробнее читайте в разделе CSS overflow.