Властивості object-fit і object-position

Властивості object-fit і object-position дозволяють контролювати розмір та положення зображення, яке розміщується в області блоку, особливо коли відсотковий розмір зображення не відповідає розміру блоку.

Це використовують для контекстних зображень. Припустімо у нас є картки товарів із зображеннями товарів. І зображення має фіксовану висоту і ширину. А от світлини, які містяться в цьому блоці для зображення - різних розмірів і пропорцій. В такому випадку зображення будуть або викривлені (розтягнуті чи сплющені) а також невідповідних розмірів.

От якраз налаштування object-fit і object-position і розв'язують питання формування зображень однакових розмірів, навіть якщо самі картинки різні за пропорціями. Класичний приклад - створення обгортки так званої "тумби" і розташування в ній зображення.

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

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

Це ніби як background-size, але для контентних зображень.

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

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

contain: Зображення буде зменшене так, щоб цілком поміститися всередині контейнера, не обрізаючи його.

cover: Зображення буде розтягнуте так, щоб цілком покрити контейнер, можливо обрізаючи частину зображення.

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

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

Щоб реалізувати цю властивість потрібно спочатку у верстці помістити зображення у певний "контейнер", який зазвичай називають "врапером" або "тубмою".

<div class="thumb">
  <img src="" alt="" class="content-img">
</div>

Батьківському "контейнеру" задають фіксовані розміри висоти та ширини.

.thumb {
  width: 200px;
  height: 300px;
}

Зображенню задають властивість блоку і розміри 100% по висоті і ширині.

.content-img {
  display: block;
  height: 100%;
  width: 100%;
}

Після цього о зображення можна застосовувати властивість object-fit.

.content-img {
  display: block;
  height: 100%;
  width: 100%;
  
  object-fit: cover;
}

Інколи "тумбу" не створюють, а задають розміри самому зображенню. Але використання такої "обгортки" візуально показує структуру, а також можна застосувати додаткові ефекти.

Властивість object-position

Властивість object-position використовується для визначення положення зображення всередині його контейнера, коли властивість object-fit установлена в значення, що обрізає зображення (наприклад, object-fit: cover або object-fit: contain). Це схоже на background-position, але для контентних зображень.

object-position: position | initial | inherit

Значення object-position може бути вказане як ключові слова (наприклад, top, bottom, left, right, center) або як координати (відсотки або пікселі) для горизонтального та вертикального положення зображення відносно контейнера. За замовчуванням значення 50% 50%, тобто вертикально і горизонтально по центру.