Свойство objectFit
Пример style.objectFit
Обрежьте края изображения, сохранив пропорции, и заполните пространство:
document.getElementById("myImg").style.objectFit = "cover";
Попробуйте сами »
Описание objectFit
Свойство objectFit используется для указания того, как следует изменять размер <img> или <video>, чтобы он соответствовал контейнеру.
Это свойство сообщает содержимому, что нужно заполнить контейнер разными способами; например, "сохранить это соотношение сторон" или "растянуться и занять как можно больше места"
Поддержка objectFit
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает данное свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| objectFit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Синтаксис objectFit
Вернуть свойство objectFit:
object.style.objectFit
Установите свойство objectFit:
object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
Значение свойства objectFit
| Значение | Описание |
|---|---|
| fill | Это значение по умолчанию. Заменяемое содержимое имеет размер, соответствующий заполнению поля содержимого элемента. При необходимости объект будет растянут или сжат, чтобы соответствовать |
| contain | Заменяемое содержимое масштабируется для сохранения пропорций и при этом умещается в область содержимого элемента. |
| cover | Заменяемый контент имеет размер, сохраняющий соотношение сторон, заполняя при этом весь блок контента элемента. Объект будет обрезан, чтобы соответствовать |
| none | Заменяемый контент не изменяет размер. |
| scale-down | Содержимое имеет такой размер, как если бы были указаны none или contain (это приведет к меньшему размеру конкретного объекта) |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Технические детали objectFit
| Значение по умолчанию: | fill |
|---|---|
| Возвращаемое значение: | Строка, представляющая object-fit элемента |
| CSS Версия | CSS3 |
Связанные страницы objectFit
CSS Учебник: CSS object-fit
CSS Справочник: Свойство object-fit