css властивість object-fit

Опис

object-fit — це CSS-властивість, яка визначає, як вміст елемента <img>, <video>, або іншого елемента, що містить зображення або відео, буде масштабуватись і вписуватись у контейнер. Її часто використовують для забезпечення коректного відображення медіаконтенту без спотворень.

Застосовується:

Галереї зображень для підтримання однакового вигляду зображень.
Адаптивне відображення відео.
Прев’ю картинок або аватарів.

автор: NagarD

Порада: Для зображень дуже схоже на властивість background-size, але не дозволяє вказати конкретні розміри у пікселях.
автор: NagarD
Порада: Задавайте властивість безпосередньо картинці , а не батьківському контейнеру.
автор: NagarD
Нотатка: Ця властивість вказує змісту заповнювати контейнер різними способами; такі як "зберегти це співвідношення сторін" або "розтягнути і зайняти якомога більше місця".
автор: NagarD
Нотатка: Працює тільки якщо картинці задано хоча б один розмір: ширина або висота. Інакше браузер не розуміє, в яку область потрібно вписати картинку.
автор: NagarD
Нотатка: Чудово працює в комбінації з властивістю object-position.
автор: NagarD

Синтаксис

object-fit: contain | cover | fill | none | scale-down;

Властивість object-fit може отримувати 5 значень:

contain

Зберігає пропорції об'єкта і масштабуються так, щоб він повністю помістився в контейнер. Між об'єктом і контейнером можуть залишатися порожні області.

Зображення буде масштабуватися до меншого розміру, якщо його розмір перевищує контейнер.

автор: NagarD

cover

Зберігає пропорції і заповнює весь контейнер, навіть якщо частина об'єкта обрізається.

Ідеально підходить для створення фонів або повноекранних зображень без спотворень.

автор: NagarD

fill

Об'єкт розтягується, щоб заповнити контейнер повністю, навіть якщо це спотворює його пропорції.

Зображення може виглядати стиснутим або витягнутим, якщо його співвідношення сторін відрізняється від контейнера.

автор: NagarD

none

Відображається в оригінальному розмірі. Якщо його розмір більший за контейнер, частина об'єкта буде прихована.

Використовується, коли важливо показати оригінальну роздільну здатність.

автор: NagarD

scale-down

Працює як none або contain, залежно від того, яке зменшує об'єкт більше.

Показує об'єкт у натуральному розмірі, якщо він менший за контейнер, або масштабує його до contain, якщо об'єкт більший.

автор: NagarD

Значення без задання:	fill
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	object.style.objectFit = 'cover';