JS властивість CSSStyleDeclaration.objectPosition

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

element.style.objectPosition – це властивість CSS, яку можна використовувати через JavaScript для визначення початкової позиції елемента, наприклад, зображення або відео, в межах його контейнера.

Властивість objectPosition дозволяє задати координати початку розміщення контенту всередині контейнера. Вона приймає значення у вигляді координат, які можна задавати у відсотках, пікселях, або ключових словах, таких як top, bottom, left, right, center.

Припустимо, ви маєте зображення всередині контейнера і хочете розташувати його у верхньому правому куті. Для цього ви можете встановити objectPosition наступним чином:

let image = document.getElementById('myImage');
image.style.objectPosition = 'top right';

Це розмістить зображення так, що його верхній правий кут буде в верхньому правому куті контейнера.

Якщо вам потрібно розмістити зображення на певній відстані від країв контейнера, використовуйте пікселі або відсотки. Наприклад, щоб змістити зображення на 20 пікселів вправо і вниз:

let image = document.getElementById('myImage');
image.style.objectPosition = '20px 20px';

Або щоб змістити на 50% вправо і 50% вниз:

let image = document.getElementById('myImage');
image.style.objectPosition = '50% 50%';

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

let image = document.getElementById('myImage');
image.style.objectFit = 'cover';
image.style.objectPosition = 'center center';

Це дозволить зображенню заповнити контейнер, зберігаючи свої пропорції, і бути центрованим.

Властивість objectPosition також може бути корисною при роботі з анімаціями. Ви можете змінювати положення об'єкта у часі, створюючи ефект руху:

let image = document.getElementById('myImage');
image.style.transition = 'object-position 2s';
image.style.objectPosition = 'bottom right';

Це змусить зображення плавно переміститися в нижній правий кут протягом 2 секунд.

Загалом, element.style.objectPosition забезпечує високий рівень контролю над розташуванням контенту всередині контейнера. Це дозволяє створювати більш гнучкі і адаптивні інтерфейси, особливо в поєднанні з іншими властивостями, такими як objectFit. Завдяки цій властивості, ви можете точніше налаштовувати відображення зображень та відео, що робить ваші веб-сторінки більш привабливими та функціональними.

Порада:

Для створення ефектів зворотного руху або панорамування використовуйте JavaScript для анімації зміни objectPosition. Це може бути корисно для інтерактивних картинок або відео, де користувачі можуть керувати видимою областю контенту:

let image = document.getElementById('myImage');
image.style.transition = 'object-position 1s';
image.style.objectPosition = 'top left';

Такий підхід дозволяє створювати плавні анімації, які покращують користувацький досвід.

Порада:

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

let banner = document.getElementById('banner');
banner.style.objectFit = 'cover';
banner.style.objectPosition = 'center top';

Цей трюк допомагає утримувати увагу користувачів на важливих елементах зображення, забезпечуючи ефективність вашого контенту.

Синтаксис

element.style.objectPosition

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

Цей приклад дозволяє користувачам змінювати положення текстового блоку всередині контейнера за допомогою кнопок. Користувач може вибрати, чи має текстовий блок бути вирівняний по верхньому лівому куту, по центру, або по нижньому правому куту контейнера. Це наочно демонструє, як властивість objectPosition може впливати на розташування елементів всередині їх контейнерів, що важливо при створенні адаптивних та гнучких макетів.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/OJeymzJ">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Цей приклад демонструє, як використати objectPosition для центрування зображення у контейнері, коли objectFit встановлено на cover. Це корисно для випадків, коли потрібно зберегти фокус на центральній частині зображення незалежно від розмірів контейнера.

const image = document.querySelector('.image-center img');
image.style.objectFit = 'cover';
image.style.objectPosition = 'center';

У цьому прикладі objectPosition використовується для позиціонування відео так, щоб його верхній лівий кут був вирівняний з верхнім лівим кутом контейнера, коли objectFit встановлено на contain. Це корисно для забезпечення видимості певної частини відео, яка повинна бути завжди в полі зору, незалежно від розмірів контейнера.

const video = document.querySelector('.video-container video');
video.style.objectFit = 'contain';
video.style.objectPosition = 'top left';

JS довідник

JavaScript

Наповнення JS розділу