Object fit css кроссбраузерно

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.

Источник

Как использовать свойство object-fit

В идеальном мире разработчик берёт подготовленную картинку из макета, вставляет в вёрстку и всё получается отлично. Но в реальности работа часто связана не только с вёрсткой, но и с поддержкой сайта. Некоторые картинки могут заменяться или обновляться. Контент-менеджер может прислать картинку в любом разрешении, а верстальщик должен уметь корректно её разместить.

В тех ситуациях, когда картинка не соответствует размеру бокса, но её нужно вставить, рекомендуется использовать object-fit . Он определяет, как элемент реагирует на размеры своего бокса. object-fit предназначается для замещаемых элементов — , , , .

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

Значения свойства object-fit

Каждое изображение имеет оригинальный размер и бокс, в котором отображается. Например, картинка может иметь размеры 1920x1080px , а бокс будет 1024x768px . Изображение сожмётся до бокса, и пользователь увидит сжатые размеры, но при этом оригинальный размер картинки останется прежним. Свойство object-fit имеет несколько значений, каждое из которых влияет на отображение изображений.

Значение fill

fill — изображение заполняет всю доступную область элемента, при этом его пропорции могут быть искажены. Задача fill — растянуть картинку до размеров её бокса. Из-за этого могут получаться сплющенные картинки.

Значение contain

contain — изображение пропорционально масштабируется, чтобы целиком поместиться внутри родительского элемента. При этом изображение может иметь пустые области по бокам, сверху или снизу.

Задача contain — сохранить пропорции оригинальной картинки, бокс заполнять не обязательно.

Значение contain удобно использовать для галереи фотографий. Если требуется сменить фото, то новое изображение не всегда идеально подходит под размеры бокса. Значение contain позволит расположить в галерее новое фото, сохранив пропорции и не обрезав важные части.

Также это значение подходит для размещения логотипов, у которых есть определённый дизайн и они не должны меняться.

⭐ Для всех ситуаций, когда ограничена область показа и когда изображение точно не должно изменяться, используйте object-fit: contain .

Значение cover

cover — изображение масштабируется таким образом, чтобы полностью заполнить родительский элемент. Пропорции сохранятся, но всё, что не поместится в размер бокса, обрежется.

Значение none

none — изображение будет отображаться в своих естественных размерах, игнорируя размеры родительского элемента. В этом случае изображение может выходить за пределы элемента или быть меньше его размеров.

Значение scale-down

scale-down — это значение определяется автоматически и выбирает более подходящее значение между none и contain . Если размеры изображения больше размеров родительского элемента, то scale-down будет вести себя как contain , иначе — как none .

Как использовать object-fit на практике

Для применения свойства object-fit выберите нужное значение и добавьте его к соответствующему элементу в CSS. Например, чтобы изображение полностью заполнило родительский элемент без искажения пропорций, используйте следующий код:

В статьях, тоже важно соблюдать пропорции картинок. При изменении картинок важно следить, чтобы вёрстка не сломалась.

Например, если картинка изменится, как видим ниже, то контент вокруг перестроится. В этом случае ничего не нужно делать, пропорции картинки не нарушают вёрстку.

Если в разметку добавить огромную картинку, она может нарушить сетку страницы. Чтобы этого не происходило, рекомендуется добавлять изображениям max-width: 100% . Тогда максимальный размер картинки всегда будет соответствовать размеру её родителя, и она не сможет выйти за его пределы. Всегда следуйте этому правилу. Свойство object-fit — удобный инструмент, который позволяет легко управлять отображением изображений на веб-страницах. Свойство контролирует соотношение сторон и поведение изображения при изменении размеров его родительского элемента.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Object-fit cross-browser solution

The object-fit CSS property is been very useful in websites nowadays, but there is still a caveat which is the need to support to Internet Explorer and/or EDGE (for some clients/projects at least). So, with that in mind, there is a JavaScript snippet to make it cross-browser and which is simpler, lighter than the current polyfills out there. First you’ll need to add data-attributes in HTML & their respective CSS property: HTML

 data-object-fit='cover' src='//picsum.photos/1200/600' />  data-object-fit='contain' src='//picsum.photos/1200/600' /> 

[data-object-fit='cover']  object-fit: cover > [data-object-fit='contain']  object-fit: contain > 

if ('objectFit' in document.documentElement.style === false)  document.addEventListener('DOMContentLoaded', () =>  document.querySelectorAll('img[data-object-fit]').forEach(image =>  (image.runtimeStyle || image.style).background = `url("$image.src>") no-repeat 50%/$image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')>` image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='$image.width>' height='$image.height>'%3E%3C/svg%3E` >) >) > 

if ('objectFit' in document.documentElement.style === false)  document.addEventListener('DOMContentLoaded', function ()  Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), function (image)  (image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')); image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E"); >); >); > 

What does this code do?

It detects if the object-fit is not supported in the browser, if so, then replace the img for a svg For the supported browsers it will run the CSS properties through the data-attributes

Источник

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> 

Источник