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.