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

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

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

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

автор: NagarD

Нотатка: За свожю дією дуже схожа на властивість 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

Значення без задання:	50% 50%
Наслідує:	Так
Анімується:	Так
JavaScript синтаксис:	object.style.objectPosition="0 10%"