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

Опис

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

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

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

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

Синтаксис

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

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

cover

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

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

contain

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

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

fill

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

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

none

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

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

scale-down

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

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

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