CSS object-fit — як картинка вписується в рамку

Опис

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

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

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

правити

Загальний опис

правити

Порада

Для зображень дуже схоже на властивість background-size, але не дозволяє вказати конкретні розміри у пікселях.

автор: NagarD правити

Порада

Задавайте властивість безпосередньо картинці <img>, а не батьківському контейнеру.

автор: 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

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	32	36	10	19	79	—

Підтримка: мобільні переглядачі

Переглядач
	4.4.3	32	36	10

Приклади

+ запропонувати свій приклад у пісочниці

<div class="row">
  <figure>
    <img class="fill" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='150'><rect width='300' height='150' fill='%234a6fa5'/><circle cx='150' cy='75' r='62' fill='%23ffd166'/></svg>" alt="Жовте коло на синьому тлі">
    <figcaption>fill (без задання)</figcaption>
  </figure>
  <figure>
    <img class="cover" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='150'><rect width='300' height='150' fill='%234a6fa5'/><circle cx='150' cy='75' r='62' fill='%23ffd166'/></svg>" alt="Жовте коло на синьому тлі">
    <figcaption>cover</figcaption>
  </figure>
  <figure>
    <img class="contain" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='150'><rect width='300' height='150' fill='%234a6fa5'/><circle cx='150' cy='75' r='62' fill='%23ffd166'/></svg>" alt="Жовте коло на синьому тлі">
    <figcaption>contain</figcaption>
  </figure>
</div>

body {
  font-family: monospace;
  font-size: 13px;
  padding: 14px;
}

.row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 6px;
  color: #444;
  text-align: center;
}

img {
  display: block;
  width: 140px;
  height: 140px;
  background-color: #eee;
  border: 2px solid #333;
}

.fill {
  object-fit: fill;
}

.cover {
  object-fit: cover;
}

.contain {
  object-fit: contain;
}