CSS The object-fit Property
Свойство CSS object-fit
используется для указания того, как
<img> или <Video> следует изменить размер в соответствии с его контейнером.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Свойство объекта CSS-Fit
Свойство CSS object-fit
используется для указания способа изменения размера <img> или <Video> в соответствии с его контейнером.
Это свойство указывает содержимому заполнять контейнер различными способами; Например, "сохранить это соотношение сторон" или "растянуть и занять столько места, сколько возможно".
Посмотрите на следующее изображение из Парижа, которое является 400кс300 пикселей:
Однако, если мы стиль изображения выше, чтобы быть 200кс400 пикселей, он будет выглядеть так:
Пример
img {
width: 200px;
height:
400px;
}
Мы видим, что изображение сжимается в соответствии с контейнером 200кс400 пикселей, и его исходное соотношение сторон уничтожается.
Если мы используем object-fit: cover;
он будет отрезать стороны изображения,
сохранение соотношения сторон, а также заполнение пространства, как это:
Пример
img {
width: 200px;
height:
400px;
object-fit: cover;
}
Другой пример
Здесь мы имеем 2 изображения и мы хотим их заполнить ширину 50% из окна браузера и 100% из высоты.
В следующем примере мы не используем object-fit
, поэтому при изменении размера окна браузера, пропорции изображений будут уничтожены:
Пример
В следующем примере мы используем object-fit: cover;
, поэтому при изменении размера окна обозревателя сохраняется соотношение сторон изображения:
Пример
Все значения свойства объекта CSS-Fit
Свойство object-fit
может иметь следующие значения:
fill
- Это значение по умолчанию. Заменяемое содержимое задается для заполнения поля содержимого элемента. При необходимости объект будет растягиваться или сжиматься по размеруcontain
- Заменяемое содержимое масштабируется для сохранения его пропорций при установке в поле содержимого элементаcover
- Заменяемое содержимое имеет размер, чтобы сохранить его пропорции при заполнении всего содержимого поля элемента. Объект будет обрезан по размеруnone
- Заменяемое содержимое не измененоscale-down
- Размер содержимого определяется так, как если бы не было указано ни одного, ни содержащего, (что привело бы к уменьшению размера конкретного объекта)
В следующем примере демонстрируются все возможные значения object-fit
Свойство:
Пример
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}