2.5 KiB
title | localeTitle |
---|---|
Object Fit | Объект Fit |
Объект Fit
Свойство object-fit
указывает, как элемент реагирует на ширину / высоту родительского поля.
Это свойство может использоваться для изображений, видео или любых других носителей. Его также можно использовать со свойством object-position
чтобы получить больше контроля над отображением носителя.
В основном мы используем свойство object-fit
чтобы определить, как оно растягивается или хлюпает встроенный носитель.
Синтаксис
.element {
object-fit: fill || contain || cover || none || scale-down;
}
Значения
-
fill
: Это значение по умолчанию . Измените размер содержимого в соответствии с его родительским полем независимо от соотношения сторон. -
contain
: Измените размер содержимого, чтобы заполнить его родительское поле, используя правильное соотношение сторон. -
cover
: аналогичноcontain
но часто обрезать контент. -
none
: отображение изображения в исходном размере. -
scale-down
: сравнить разницу междуnone
иcontain
чтобы найти наименьший размер конкретного объекта.
Совместимость с браузером
object-fit
поддерживается большинством современных браузеров, для получения самой последней информации о совместимости вы можете проверить это http://caniuse.com/#search=object-fit
Также есть полифил для браузера который не поддерживает это свойство (в основном IE). https://github.com/anselmh/object-fit
Больше информации
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit https://drafts.csswg.org/css-images-3/#the-object-fit