- object-fit
- Try it
- Syntax
- Values
- Formal definition
- Formal syntax
- Examples
- Setting object-fit for an image
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- CSS The object-fit Property
- The CSS object-fit Property
- Example
- Using object-fit: cover;
- Example
- Using object-fit: contain;
- Example
- Using object-fit: fill;
- Example
- Using object-fit: none;
- Example
- Using object-fit: scale-down;
- Example
- Another Example
- Example
- Example
- CSS object-fit More Examples
- Example
- CSS Object-* Properties
- object — fit
- Кратко
- Пример
- Как пишется
- Как понять
- Подсказки
- На практике
- Алёна Батицкая советует
object-fit
The object-fit CSS property sets how the content of a replaced element, such as an or , should be resized to fit its container.
You can alter the alignment of the replaced element’s content object within the element’s box using the object-position property.
Try it
Syntax
object-fit: contain; object-fit: cover; object-fit: fill; object-fit: none; object-fit: scale-down; /* Global values */ object-fit: inherit; object-fit: initial; object-fit: revert; object-fit: revert-layer; object-fit: unset;
The object-fit property is specified as a single keyword chosen from the list of values below.
Values
The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be «letterboxed» if its aspect ratio does not match the aspect ratio of the box.
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object’s aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
The replaced content is sized to fill the element’s content box. The entire object will completely fill the box. If the object’s aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.
The replaced content is not resized.
The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
Formal definition
Formal syntax
object-fit =
fill |
contain |
cover |
none |
scale-down
Examples
Setting object-fit for an image
HTML
section> h2>object-fit: fillh2> img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo" /> img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> h2>object-fit: containh2> img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo" /> img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> h2>object-fit: coverh2> img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo" /> img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> h2>object-fit: noneh2> img class="none" src="mdn_logo_only_color.png" alt="MDN Logo" /> img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> h2>object-fit: scale-downh2> img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo" /> img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> section>
CSS
h2 font-family: Courier New, monospace; font-size: 1em; margin: 1em 0 0.3em; > img width: 150px; height: 100px; border: 1px solid #000; margin: 10px 0; > .narrow width: 100px; height: 150px; > .fill object-fit: fill; > .contain object-fit: contain; > .cover object-fit: cover; > .none object-fit: none; > .scale-down object-fit: scale-down; >
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 7, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
CSS The object-fit Property
The CSS object-fit property is used to specify how an or should be resized to fit its container.
The CSS object-fit Property
The CSS object-fit property is used to specify how an or should be resized to fit its container.
This property tells the content to fill the container in a variety of ways; such as «preserve that aspect ratio» or «stretch up and take up as much space as possible».
Look at the following image from Paris. This image is 400 pixels wide and 300 pixels high:
However, if we style the image above to be half its width (200 pixels) and same height (300 pixels), it will look like this:
Example
We see that the image is being squished to fit the container of 200×300 pixels (its original aspect ratio is destroyed).
Here is where the object-fit property comes in. The object-fit property can take one of the following values:
- fill — This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
- contain — The image keeps its aspect ratio, but is resized to fit within the given dimension
- cover — The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
- none — The image is not resized
- scale-down — the image is scaled down to the smallest version of none or contain
Using object-fit: cover;
If we use object-fit: cover; the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit:
Example
Using object-fit: contain;
If we use object-fit: contain; the image keeps its aspect ratio, but is resized to fit within the given dimension:
Example
Using object-fit: fill;
If we use object-fit: fill; the image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit:
Example
Using object-fit: none;
If we use object-fit: none; the image is not resized:
Example
Using object-fit: scale-down;
If we use object-fit: scale-down; the image is scaled down to the smallest version of none or contain :
Example
Another Example
Here we have two images and we want them to fill the width of 50% of the browser window and 100% of the height.
In the following example we do NOT use object-fit , so when we resize the browser window, the aspect ratio of the images will be destroyed:
Example
In the next example, we use object-fit: cover; , so when we resize the browser window, the aspect ratio of the images is preserved:
Example
CSS object-fit More Examples
The following example demonstrates all the possible values of the object-fit property in one example:
Example
CSS Object-* Properties
The following table lists the CSS object-* properties:
Property | Description |
---|---|
object-fit | Specifies how an or should be resized to fit its container |
object-position | Specifies how an or should be positioned with x/y coordinates inside its «own content box» |
object — fit
Подстраиваем картинку или видео под контейнер без деформации.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство, которое позволяет управлять тем, как картинка или видео будет подстраиваться под заданные размеры.
По своему поведению очень похоже на свойство background — size для фоновых изображений.
Пример
Скопировать ссылку «Пример» Скопировано
Представим, что у нас есть картинка размером 500 на 150 пикселей:
src="https://doka.guide/css/object-fit/images/landscape.jpg" alt="Картинка из примера про object-fit">
img class="image" src="images/landscape.jpg" alt="Картинка из примера про object-fit" >
По дизайну картинка должна занимать 250 на 250 пикселей. Если мы просто зададим эти размеры, то картинка сильно деформируется.
.parent width: 250px; height: 250px; border: 1px solid #FFFFFF; /* Для наглядности */>
.parent width: 250px; height: 250px; border: 1px solid #FFFFFF; /* Для наглядности */ >
Выглядит не очень. Но тут на помощь приходит свойство object — fit , которое позволит нам сохранить пропорции исходного изображения при подстройке под нужные нам размеры.
.image object-fit: cover;>
.image object-fit: cover; >
Картинка не деформировалась, подстроилась под нужные размеры. Другой вопрос, что на ней теперь почти ничего не видно 😅, но это мелочи.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Свойство задаётся для самого тега , не для родителя. Пишем свойство, а в качестве значения задаём одно из ключевых слов. В отличие от background — size мы не можем задать конкретные размеры в качестве значения 🤔
- fill — значение по умолчанию, картинка полностью вписывается в указанные размеры без соблюдения собственных пропорций. Часто это приводит к ощутимым деформациям.
- contain — картинка подстроится под заданные размеры так, чтобы поместиться внутри целиком без нарушения пропорций.
- cover — картинка без нарушения пропорций заполнит всю доступную область, обрезая всё ненужное.
- none — картинка отображается без изменения пропорций или размеров.
- scale — down — браузер сравнивает размеры картинки со значением none и со значением contain и выбирает одно из этих значений, деформируя картинку соответствующим образом. Сложно объяснить, посмотрите демку 🥴
Советую поизменять размер окна браузера чтобы наглядно увидеть как картинки подстраиваются (или нет) под заданные размеры.
Как понять
Скопировать ссылку «Как понять» Скопировано
Дословно свойство переводится как «объект подходит», что вполне точно отражает принцип его работы. Свойство управляет тем, как подгружаемая картинка будет вписываться в рамки заданных размеров.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Задавайте свойство самой картинке , не родительскому контейнеру.
💡 Работает только если картинке задан хотя бы один размер: ширина или высота. Иначе браузер не понимает в какую область нужно вписать картинку.
💡 Свойство и его значение не наследуется. Хотя я бы посмотрела на то, как вы вложите что-нибудь внутрь картинки 0_о
💡 Классно работает в сочетании со свойством object — position .
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Самое полезное из всех доступных значений, на мой взгляд, значение cover . Оно позволяет имитировать поведение фонового изображения для элементов или . В последнем случае это особенно актуально потому что нет других способов красиво адаптировать видео под любой размер экрана без нарушения пропорций по дороге.