Предотвращение переполнения фонового изображения на больших экранах мобильных устройств

Question

У меня есть div с установленным фоновым изображением. Это выглядит совершенно нормально на небольших мобильных экранах.

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

Вот сайт: https://www.elevarsports.com/pages/elevar-arc-racer-v2-beta#

Это класс, на который нужно смотреть .es-element-hero-imgtxt-mobile-img.

Я уже пробовал установить max-width: 100%, но это ничего не дает.

Это примеры:

iPhone 6/7/8 (как это должно выглядеть на все мобильные экраны

iPhone XS Max (how it looks on bigger and longer screens)

введите описание изображения здесь

Примечание: в качестве браузера я использую Firefox.

Answer 1

Вы можете попробовать что-то вроде:

@media (max-aspect-ratio: 720/900) {
    .es-shoe-landing-hero .slide-1 {
        background-size: contain !important;
        background-position: top !important;
        background-color: #000;
    }
}

Это изменяет размер и расположение фонового изображения первого слайда-героя. 720/900 - это размеры изображения, которые используются для определения соотношения сторон, при котором применяется этот стиль.

Однако тогда ваша проблема заключается в том, что изображение недостаточно высокое для просмотра.