СSS Свойство object-fit
Пример
Отрезать стороны изображения, сохраняя соотношение сторон, и заполнить пространство:
img.a {
width: 200px;
height:
400px;
object-fit: cover;
}
Редактор кода »
Определение и использование
Свойство object-fit используется, чтобы указать, как <img> или <video> должны быть изменены в соответствии с его контейнером.
Это свойство указывает содержимому, заполнить контейнер различными способами; например, "сохранить соотношение сторон" или "растянуть и занять как можно больше места".
| Значение по умолчанию: | см. раздел отдельные свойства |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет Прочитайте о animatable |
| Версия: | 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
CSS Справочник: CSS object-position
HTML DOM Справочник: Свойство objectFit
