Как настроить фокус изображения через 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 в приватном окне браузера.