object-fit
Обновлено: 30.12.2022
object-fit
Управляет соотношением сторон заменяемых элементов, таких как <img> и <video>, когда у них задана ширина или высота, а также способом масштабирования. Свойство object-fit может сохранять исходные пропорции элемента или наоборот, искажать пропорции, в угоду соблюдения размеров.
Краткая информация
| Значение по умолчанию | fill |
| Наследуется | Нет |
| Применяется | К <img>, <video>, <object>, <input type="image"> |
| Анимируется | Нет |
Синтаксис
object-fit: fill | contain | cover | noneЗначения
| fill | Элемент масштабируется, чтобы соответствовать заданным размерам, при этом пропорции игнорируются. |
| contain | Элемент масштабируется, чтобы целиком уместиться в заданные размеры с соблюдением пропорций. |
| cover | Элемент увеличивается или уменьшается, чтобы целиком заполнить заданную область с сохранением пропорций. |
| none | Сохраняются исходные пропорции элемента, установленные значения ширины или высоты не влияют на содержимое. |
Влияние разных значений на фотографии продемонстрировано на рис. 1. Был использован следующий стиль.
img {
background: #ccc; overflow: hidden;
width: 200px; height: 200px;
}Пример
Объектная модель
Объект.style.objectFit
Примечание
Edge поддерживает object-fit только для <img>.
Opera до версии 19 поддерживает свойство -o-object-fit.