CSS object-fit Свойство
Пример
Отрежьте стороны изображения, сохраняя пропорции, и заполните пространство:
img.a {
width: 200px;
height:
400px;
object-fit: cover;
}
Определение и использование
Свойство object-fit используется для указания способа изменения размера <img> или <Video> в соответствии с его контейнером.
Это свойство указывает содержимому заполнять контейнер различными способами; Например, "сохранить это соотношение сторон" или "растянуть и занять столько места, сколько возможно".
| Значение по умолчанию: | просмотреть отдельные свойства |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.objectFit="cover" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Синтаксис CSS
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Значения свойств
| Значение | Описание | |
|---|---|---|
| fill | Это значение по умолчанию. Заменяемое содержимое задается для заполнения поля содержимого элемента. При необходимости объект будет растягиваться или сжиматься по размеру | |
| contain | Заменяемое содержимое масштабируется для сохранения его пропорций при установке в поле содержимого элемента | |
| cover | Заменяемое содержимое имеет размер, чтобы сохранить его пропорции при заполнении всего содержимого поля элемента. Объект будет обрезан по размеру | |
| none | Заменяемое содержимое не изменено | |
| scale-down | Размер содержимого определяется так, как если бы не было указано ни одного, ни содержащего, (что привело бы к уменьшению размера конкретного объекта) | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Похожие страницы
CSS Справочник: CSS object-fit