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; 
}
Вихідні зображення
fill
contain
cover
none

Приклад

Об'єктна модель

Об'єкт.style.objectFit

Примітка

Edge підтримує object-fit тільки для <img>.

Opera до версії 19 підтримує властивість -o-object-fit.

Браузери

object-fit

Переглянути сумісність з Can I use?

object-fit