Як налаштувати фокус зображення через object-position в Elementor

Що роблять object-fit і object-position

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

Властивість object-position визначає, яку частину зображення потрібно залишити в зоні видимості після такого обрізання. Вона приймає два значення: перше для горизонталі, друге для вертикалі.

• 50% 50% — фокус по центру, стандартний варіант.
• 50% 0% — вирівнювання ближче до верхнього краю.
• 50% 100% — вирівнювання ближче до нижнього краю.
• 0% 50% — фокус ліворуч.
• 100% 50% — фокус праворуч.
• 70% 40% — зміщення фокусу вправо та вгору відносно центру.

Як додати клас зображенню в Elementor

Спочатку потрібно визначити елемент, до якого буде застосовано стиль. Якщо використовується віджет Image, додайте клас image-focus у поле CSS Classes. Назва класу вводиться без крапки на початку.

Якщо зображення вкладене в контейнер або інший блок, клас можна додати батьківському елементу. У такому випадку селектор .image-focus img знайде зображення всередині цього блоку. Важливо, щоб клас був доданий саме до того елемента, який містить потрібне зображення, а не до випадкової секції сторінки.

• Відкрийте потрібну сторінку в редакторі Elementor.
• Виберіть віджет зображення або контейнер із ним.
• Перейдіть до додаткових налаштувань елемента.
• У полі CSS Classes введіть image-focus.
• Додайте CSS у Custom CSS Elementor Pro або в загальні стилі сайту.

Базовий CSS для зміщення фокусу

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

• Замініть 30% на 20% або 10%, якщо головний об’єкт розташований ще вище.
• Використайте 70% 40%, якщо об’єкт знаходиться праворуч і трохи вище середини.
• Після зміни стилю перевірте не лише редактор, а й опубліковану сторінку.

.image-focus img {
  object-fit: cover;
  object-position: 50% 30%;
}

Чому object-position іноді не дає видимого результату

object-position працює помітно лише тоді, коли зображення справді обрізається всередині області з визначеними розмірами. Якщо висота картинки автоматично підлаштовується під її пропорції, зайвої частини може не бути, тому зміщення фокусу буде непомітним.

Також стиль може не спрацювати, якщо клас додано не до батьківського елемента, якщо селектор не відповідає фактичній HTML-структурі або якщо інше правило має вищий пріоритет. У разі конфлікту перевірте стилі через інструменти розробника браузера.

• Переконайтеся, що зображення має висоту через висоту віджета, контейнера або мінімальну висоту.
• Перевірте, що в браузері застосовується саме object-fit: cover.
• Переконайтеся, що клас image-focus написаний без помилок.
• Не додавайте !important одразу: спочатку знайдіть причину конфлікту стилів.
• Якщо зображення є фоном секції, селектор img не спрацює — для background-image потрібні інші CSS-властивості.

.image-focus {
  min-height: 320px;
  overflow: hidden;
}

.image-focus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

Окреме позиціонування для мобільної версії

На вузькому екрані змінюється співвідношення сторін блоку, тому той самий фокус може виглядати добре на комп’ютері, але обрізати обличчя або товар на смартфоні. Для мобільної версії можна задати інше значення object-position через медіазапит.

Порогове значення 767px є поширеним прикладом для мобільних пристроїв, але його варто узгодити з реальними точками переходу вашого макета. Не обов’язково використовувати однакове позиціонування для всіх екранів.

• На десктопі перевірте широкий банер і горизонтальне розташування об’єкта.
• На смартфоні перевірте портретну композицію та висоту блоку.
• Якщо об’єкт має різне розташування в різних форматах, підберіть позицію окремо для кожного брейкпоінта.

@media (max-width: 767px) {
  .image-focus img {
    object-position: 50% 20%;
  }
}

Практичні приклади для різних типів блоків

Для портрета, де обличчя знаходиться у верхній частині кадру, почніть із 50% 20% або 50% 25%. Якщо людина стоїть праворуч, спробуйте 70% 30% або 80% 35%.

Для товарної картки значення залежить від композиції фотографії. Якщо предмет зміщений ліворуч, може підійти 30% 50%. Для зображення автомобіля або інтер’єру часто потрібно залишити більше простору з боку, куди спрямований рух чи погляд.

Підбирайте значення візуально, невеликими кроками. Наприклад, змініть вертикальне значення з 30% на 25% або 35%, а не одразу на 0%. Так легше зберегти природну композицію.

• Не орієнтуйтеся лише на вигляд у редакторі Elementor.
• Перевірте сторінку в режимах desktop, tablet і mobile.
• Переконайтеся, що важливий текст, логотип або частина товару не перекривається.
• Залишайте достатньо контрасту, якщо поверх зображення розміщено заголовок або кнопку.

Поширені помилки та важливі обмеження

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

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

• Для декоративних зображень alt може бути порожнім, якщо це відповідає їхній ролі.
• Не стискайте якість зображення надмірно після завантаження.
• Не використовуйте один фокус для всіх карток, якщо об’єкти на фото розташовані по-різному.
• Після очищення кешу перевірте CSS у приватному вікні браузера.