object-fit

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

Інтерактивний приклад використання

Синтаксис

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

Значення

  • fill — контент розтягується, щоб повністю заповнити контейнер, не зберігаючи пропорції.
  • contain — контент масштабується, щоб повністю поміститися в контейнер, зберігаючи пропорції; можуть з’являтися порожні області.
  • cover — контент масштабується, щоб повністю покрити контейнер, зберігаючи пропорції; зайві частини обрізаються.
  • none — контент не змінює розмір; відображається у своїх початкових розмірах.
  • scale-down — контент масштабується лише якщо він більший за контейнер; обирається менший розмір між none та contain.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • object-fit працює тільки для заміщуваних елементів (<img>, <video>, <canvas>, <picture>).
  • Властивість часто використовується разом з object-position, щоб керувати центруванням або зміщенням контенту всередині контейнера.
  • Значення cover або contain зручно застосовувати для адаптивних галерей, щоб усі зображення автоматично підлаштовувалися під розміри блоків.
  • scale-down підходить для змішаних розмірів контенту, щоб уникнути розтягування маленьких файлів.
  • Властивість підтримує прозорість і сучасні формати зображень (PNG, WEBP, SVG).
  • Властивість підтримується всіма сучасними браузерами.