CSS Object-fit та Object-position

object-fit та object-position — це CSS пропси, які дозволяють контролювати, як контент (зображення, відео) відображається всередині свого контейнера, зберігаючи співвідношення сторін.

Що таке object-fit?

object-fit визначає, як контент (зазвичай <img> або <video>) повинен бути масштабований і розташований всередині свого контейнера.

Значення object-fit

Значення	Опис	Поведінка
`fill`	Заповнює весь контейнер	Розтягує, може спотворювати
`contain`	Вміщується всередині контейнера	Зберігає пропорції, можуть бути пусті області
`cover`	Заповнює контейнер, зберігаючи пропорції	Може бути обрізаним, але заповнює весь контейнер
`none`	Оригінальний розмір	Не масштабує, може бути обрізаним
`scale-down`	Масштабує вниз, якщо потрібно	Як `none` або `contain`, вибирає менший розмір

Приклади використання

fill — Заповнити контейнер

css

.image-container {
  width: 300px;
  height: 200px;
  border: 2px solid #333;
}

.image-fill {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

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

contain — Вміститися всередині контейнера

css

.image-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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

cover — Заповнити з обрізанням

css

.image-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

none — Оригінальний розмір

css

.image-none {
  width: 100%;
  height: 100%;
  object-fit: none;
}

Результат: Зображення зберігає оригінальний розмір, може бути обрізаним.

scale-down — Масштабувати вниз, якщо потрібно

css

.image-scale-down {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

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

Візуальне порівняння

html

<div class="gallery">
  <div class="image-box">
    <img src="photo.jpg" class="img-fill" alt="Fill">
    <p>fill</p>
  </div>
  <div class="image-box">
    <img src="photo.jpg" class="img-contain" alt="Contain">
    <p>contain</p>
  </div>
  <div class="image-box">
    <img src="photo.jpg" class="img-cover" alt="Cover">
    <p>cover</p>
  </div>
  <div class="image-box">
    <img src="photo.jpg" class="img-none" alt="None">
    <p>none</p>
  </div>
</div>

css

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.image-box {
  width: 200px;
  height: 150px;
  border: 2px solid #ddd;
  overflow: hidden;
}

.image-box img {
  width: 100%;
  height: 100%;
}

.img-fill { object-fit: fill; }
.img-contain { object-fit: contain; }
.img-cover { object-fit: cover; }
.img-none { object-fit: none; }

Object-position

object-position визначає положення контенту всередині контейнера (аналогічно до background-position).

Значення object-position

css

/* Ключові слова */
object-position: center;      /* за замовчуванням */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: top left;
object-position: bottom right;

/* Відсотки */
object-position: 50% 50%;     /* центр */
object-position: 0% 0%;       /* верхній лівий кут */
object-position: 100% 100%;   /* нижній правий кут */

/* Пікселі */
object-position: 20px 30px;

Приклади з object-position

css

/* Зосередження на обличчі людини */
.portrait {
  object-fit: cover;
  object-position: center top;
}

/* Зосередження на правій частині зображення */
.focus-right {
  object-fit: cover;
  object-position: right center;
}

/* Користувацька позиція */
.custom-position {
  object-fit: cover;
  object-position: 30% 70%;
}

Практичні приклади

Картка продукту

html

<div class="product-card">
  <div class="product-image">
    <img src="product.jpg" alt="Product">
  </div>
  <div class="product-info">
    <h3>Назва продукту</h3>
    <p>Опис продукту</p>
  </div>
</div>

css

.product-card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 200px;
  background: #f0f0f0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

Аватар користувача

css

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

Галерея зображень

css

.gallery-item {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

Робота з відео

object-fit також працює з елементами <video>:

html

<video class="video-player" controls>
  <source src="video.mp4" type="video/mp4">
</video>

css

.video-player {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

Сумісність з aspect-ratio

object-fit чудово працює разом з aspect-ratio:

css

.image-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Підтримка браузерами

object-fit та object-position підтримуються в усіх сучасних браузерах:

Chrome 31+
Firefox 36+
Safari 7.1+
Edge 16+

Для старіших версій IE ви можете використовувати полифіл або запасний варіант.

Порада:

Використовуйте object-fit: cover, щоб створити красиві картки та галереї, де зображення повинні заповнювати контейнер без спотворення. Поєднуйте з object-position, щоб контролювати фокус зображення.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань