Свойство object fit css

object-fit¶

Свойство object-fit управляет соотношением сторон заменяемых элементов, таких как и , когда у них задана ширина или высота, а также способом масштабирования.

Свойство object-fit может сохранять исходные пропорции элемента или наоборот, искажать пропорции, в угоду соблюдения размеров.

Демо¶

• contain
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• container
• container-name
• container-type
• @container
• content-visibility

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12

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; 

Значения¶

fill Элемент масштабируется, чтобы соответствовать заданным размерам, при этом пропорции игнорируются. contain Элемент масштабируется, чтобы целиком уместиться в заданные размеры с соблюдением пропорций. cover Элемент увеличивается или уменьшается, чтобы целиком заполнить заданную область с сохранением пропорций. none Сохраняются исходные пропорции элемента, установленные значения ширины или высоты не влияют на содержимое. scale-down Содержимое имеет такой размер, как если бы не было указано none или contains , в зависимости от того, что привело бы к меньшему размеру конкретного объекта.

Влияние разных значений на фотографии продемонстрировано на рис. 1. Был использован следующий стиль.

img  background: #ccc; overflow: hidden; width: 200px; height: 200px; > 

Рис. 1. Фотографии с разным значением object-fit

Примечание¶

Opera до версии 19 поддерживает свойство -o-object-fit .

Спецификации¶

Поддержка браузерами¶

Can I Use object-fit? Data on support for the object-fit feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

 html> head> meta charset="utf-8" /> title>object-fittitle> style> .dolphin img  object-fit: cover; height: 400px; width: 300px; > style> head> body> p class="dolphin"> img src="image/dolphin.jpg" alt="Дельфин" /> p> body> html> 

Источник

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 . Оно позволяет имитировать поведение фонового изображения для элементов или . В последнем случае это особенно актуально потому что нет других способов красиво адаптировать видео под любой размер экрана без нарушения пропорций по дороге.

Источник

object-fit

Свойство object-fit определяет, как содержимое заменяемого элемента, такого как или , должно заполнять контейнер относительно его высоты и ширины.

Интерактивный пример

Синтаксис

Для object-fit можно указать одно из нижеперечисленных свойств.

Значения

Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.

Смещаемый контент меняет свой размер таким образом, чтобы подстроиться под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определён как «помещённый внутрь» блока, ограничиваясь его шириной и высотой.

Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определён как «покрытие» блока, ограничиваясь его шириной и высотой.

Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определён с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.

Контент изменяет размер, сравнивая разницу между none и contain , для того, чтобы найти наименьший конкретный размер объекта.

Правильный синтаксис

object-fit =
fill | (en-US)
contain | (en-US)
cover | (en-US)
none | (en-US)
scale-down

Пример

HTML Контент

div> h2>object-fit: fillh2> 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: containh2> 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: coverh2> 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: noneh2> 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-downh2> 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

Смотрите также

Found a content problem with this page?

This page was last modified on 15 дек. 2022 г. 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»

Источник