CSS Властивість object-fit
CSS властивість object-fit використовується, щоб вказати, як <img> або <video> потрібно змінити розмір, щоб відповідати його контейнеру.
Object-fit - в пер. з анг. - підгонка об’єкта.
Підтримка браузерами
Числа в таблиці вказують першу версію браузера, яка повністю підтримує властивість.
| Властивість | |||||
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS властивість object-fit
CSS властивість object-fit використовується, щоб вказати, як <img> або <video> мають бути змінені, щоб відповідати його контейнеру.
Ця властивість вказує змісту заповнювати контейнер різними способами; такі як "зберегти це співвідношення сторін" або "розтягнути і зайняти якомога більше місця".
Подивіться на наступне зображення із Парижу, розміром 400x300 пікселів:
Однак, якщо ми додамо зображення більше 200x400 пікселів, воно буде виглядіти так:
Ми бачимо, що зображення стискається, щоб уміститися в контейнер розміром 200x400 пікселів, і його початкове співвідношення сторін порушується.
Якщо ми використовуємо object-fit: cover; - це обрізує сторони зображення, зберігаючи пропорції, а також заповнюючи простір, як на зображенні нижче:
Інший приклад
Тут у нас є два зображення, і ми хочемо, щоб вони займали 50% ширини вікна браузера та 100% висоти.
В наступному прикладі ми НЕ використовуємо object-fit, тому при зміні розміру вікна браузера співвідношення сторін зображень буде порушено:
В наступному прикладі ми використовуємо object-fit: cover;, тому при зміні розміру вікна браузера співвідношення сторін зображень зберігається:
Всі значення CSS властивості object-fit
Властивість object-fit може мати наступні значення:
fill- Це за замовчуванням. Розмір змісту, що замінюється, заповнено в полі змісту елемента. При необхідності об’єкт буде розтягнуто або здавлено, щоб відповідатиcontain- Замінений зміст масштабується, щоб зберегти його пропорції, в той же час вписуючись в поле змісту елементаcover- Розмір змісту, що замінюється, відповідає його пропорціям при заповненні всього поля змісту елемента. Об’єкт буде обрізано, щоб відповідатиnone- Замінений контент не змінюєтьсяscale-down- Розмір змісту визначається так, якщо б він не був вказаний або містився (що призвело б до зменшення розміру конкретного об’єкту)
В наступному прикладі демонструються всі можливі значення властивості object-fit:
Приклад
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Спробуйте самі »
CSS Object-* Властивості
В наступній таблиці перераховані CSS властивості object-* :
| Властивість | Опис |
|---|---|
| object-fit | Визначає, як <img> або <video> має бути змінено, щоб відповідати його контейнеру |
| object-posititon | Визначає, як <img> або <video> має розташовуватись із координатами x/y всередині "власного поля змісту". |
