object-position

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

Інтерактивний приклад використання

Синтаксис

object-position: <horizontal-position> <vertical-position>;

Значення

  • <horizontal-position> — задає горизонтальну позицію об’єкта. Це може бути:
    • left, center, right — відповідно вирівнює об’єкт по лівому, центру або правому краю контейнера.
    • <length> — конкретне значення в пікселях або інших одиницях виміру (наприклад, 100px, 5em).
    • <percentage> — позиція об’єкта в відсотках від ширини контейнера (наприклад, 50% для центру).
  • <vertical-position> — задає вертикальну позицію об’єкта. Це може бути:
    • top, center, bottom — відповідно вирівнює об’єкт по верхньому, середньому або нижньому краю контейнера.
    • <length> — конкретне значення в пікселях або інших одиницях виміру (наприклад, 100px, 5em).
    • <percentage> — позиція об’єкта в відсотках від висоти контейнера (наприклад, 50% для центру).
  • Якщо вказано лише одне значення, друге значення автоматично вважається center.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • object-position працює тільки в поєднанні з object-fit. Якщо object-fit не задано, object-position не матиме ефекту.
  • Властивість дає точний контроль над тим, де саме зображення або відео буде розташоване в контейнері. Це важливо при створенні складних макетів або адаптивних дизайнів.
  • Можна задавати два значення для object-position: перше для горизонтального, друге — для вертикального розташування.
  • За замовчуванням object-position встановлюється на center, тому зображення або відео зазвичай центровані в контейнері, якщо не вказано інше.
  • Властивість підтримується всіма сучасними браузерами.