Изображение героя обрезано в разных размерах

У меня есть сайт с изображением баннера героя.

Вот как это выглядит на десктопе:

Вот как это выглядит на мобильном устройстве (через инструменты разработчика Chrome):

Как вы можете видеть, изображение на мобильном устройстве слишком узкое, я хочу, чтобы оно выглядело “выше”. В основном, другое соотношение сторон, чем на десктопе.

Я рассмотрел несколько альтернатив, и ни одна не сработала, так что не уверен, какой подход лучше. Некоторые из альтернатив, которые я пробовал:

1) Обрезать изображение для мобильных устройств с другим соотношением сторон, от центра к краям. Таким образом, основное сообщение (МЕГА РАСПРОДАЖА) будет выглядеть нормально, а остальное не будет видно на мобильном (не парьтесь об этом). Я не знаю, как это сделать, а также проблема в том, что изображение имеет srcset, так что это добавляет сложности.

2) Использовать одно и то же большое изображение для всех устройств, но использовать min-height, центрировать изображение так, чтобы видима была только центральная часть. Проблема в том, что srcset покажет меньшее изображение, так что этот подход пока не сработал.

Какова лучшая практика для этого? Я прочитал ОЧЕНЬ много о пользовательских полях, функции add_image_size(), srcset и т. д., но пока не могу это решить.

Любая помощь будет полезна. Большое спасибо!

ИЗМЕНЕНИЕ: Похоже, что элемент <picture> то, что мне нужно, но теперь я не знаю, как интегрировать его с загрузкой изображений WP и процессом обрезки.

Вместо того чтобы создавать новый размер изображения или загружать совершенно другое изображение только для мобильных устройств, вы можете поэкспериментировать с object-fit и object-position CSS.

object-fit и object-position работают по сути так же, как background-size и background-position, но вместо того, чтобы применяться только к фоновым изображениям, они работают с объектами, такими как тег <img>.

Используйте это с медиазапросами, и вы сможете указать, как вы хотите, чтобы изображение выглядело на мобильных устройствах.

Посмотрите этот Fiddle. Обратите внимание, как они используют одно и то же изображение, но оно выглядит более-менее увеличенным при разных ширинах, это то, что вы хотите сделать.

Вы можете установить эти различные значения для object-fit…

• fill: это значение по умолчанию, которое растягивает изображение, чтобы вписать его в контентный блок, независимо от его соотношения сторон.
• contain: увеличивает или уменьшает размер изображения, чтобы заполнить блок, сохраняя его соотношение сторон.
• cover: изображение заполнит высоту и ширину своего блока, вновь сохраняя свое соотношение сторон, но часто обрезая изображение в процессе.
• none: изображение игнорирует высоту и ширину родительского блока и сохраняет свой оригинальный размер.
• scale-down: изображение сравнивает разницу между none и contain, чтобы найти самый маленький конкретный размер объекта.

Примечание: По умолчанию изображение центрировано в контентном блоке. Вы можете изменить это, используя object-position.

Пример:

img {
    object-fit: none;
    object-position: 50% 50%; /* значение по умолчанию: изображение центрировано */
    object-position: 0 0; /* расположение в левом верхнем углу контентного блока */
}

Вы можете просто использовать приведенный ниже CSS для контейнерного класса вашего баннера героя. Например, если контейнерный класс вашего баннера героя называется ‘hero-container’, то добавьте ниже указанный CSS, здесь вы можете уменьшить значение 100 до 80 или 70 в зависимости от высоты изображения баннера, которое вы хотите. 100vh будет отображать полную высоту экрана, так что вы можете уменьшить это значение по своему усмотрению, CSS ниже:

.hero-container{height: 100vh;}