CSS object-position — зсув зображення в контейнері

Використання

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

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

правити

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

правити

Нотатка

За свожю дією дуже схожа на властивість background-position

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

Нотатка

Не працює без object-fit

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

+ додати пораду чи нотатку

Синтаксис

object-position: position|initial|inherit;

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

position

Задає позицію зображення або відео всередині його контейнера. Перше значення контролює положення по осі x, а друге — по осі y. Може бути рядком (left, center, right і т.п.) або числом (у пікселях або відсотках). Дозволяються від’ємні значення.

автор: NagarD

правити

initial

Встановлює властивість у значення без задання

автор: NagarD

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)

автор: NagarD

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div class="row">
  <figure>
    <img class="l" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%234a6fa5'/%3E%3Ccircle cx='45' cy='75' r='34' fill='%23ffd166'/%3E%3Ccircle cx='255' cy='75' r='34' fill='%23e07a5f'/%3E%3C/svg%3E" alt="Синє тло з жовтим колом ліворуч і помаранчевим праворуч">
    <figcaption>left center</figcaption>
  </figure>
  <figure>
    <img class="c" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%234a6fa5'/%3E%3Ccircle cx='45' cy='75' r='34' fill='%23ffd166'/%3E%3Ccircle cx='255' cy='75' r='34' fill='%23e07a5f'/%3E%3C/svg%3E" alt="Синє тло з жовтим колом ліворуч і помаранчевим праворуч">
    <figcaption>center (типово)</figcaption>
  </figure>
  <figure>
    <img class="r" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%234a6fa5'/%3E%3Ccircle cx='45' cy='75' r='34' fill='%23ffd166'/%3E%3Ccircle cx='255' cy='75' r='34' fill='%23e07a5f'/%3E%3C/svg%3E" alt="Синє тло з жовтим колом ліворуч і помаранчевим праворуч">
    <figcaption>right center</figcaption>
  </figure>
  <figure>
    <img class="f" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%234a6fa5'/%3E%3Ccircle cx='45' cy='75' r='34' fill='%23ffd166'/%3E%3Ccircle cx='255' cy='75' r='34' fill='%23e07a5f'/%3E%3C/svg%3E" alt="Синє тло з жовтим колом ліворуч і помаранчевим праворуч">
    <figcaption>без object-fit</figcaption>
  </figure>
</div>

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

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

figure {
    margin: 0;
}

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

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

.l {
    object-fit: cover;
    object-position: left center;
}

.c {
    object-fit: cover;
    object-position: center center;
}

.r {
    object-fit: cover;
    object-position: right center;
}

.f {
    object-position: right center;
}