Как исправить изображение на мобильных устройствах?

Я интегрировал фиксированную обложку на свой веб-сайт, и она отлично работает: https://stadtpampa.de/4407-2/ К сожалению, это не работает на мобильном устройстве. Изображение не реагирует и не исправлено. Посмотреть мобильную версию

Я попытался изменить размер с помощью @media в CSS:

@media(max-width: 768px) {
.wp-block-cover {
    min-height: 300px !important;
}}

Тогда размер в порядке, но он не фиксирован. Не могли бы вы помочь мне с правильным кодом CSS для исправления изображения на мобильных устройствах?

Заранее спасибо!


person Jessen    schedule 21.12.2020    source источник
comment
Вы пробовали высота: авто; без минимальной высоты;? это то, что вы хотите?   -  person Sfili_81    schedule 21.12.2020
comment
Спасибо за Ваш ответ. К сожалению, это не то, что я ищу.   -  person Jessen    schedule 21.12.2020
comment
ОК, объясните лучше, что вы хотите, возможно, включая рабочий пример вашей проблемы.   -  person Sfili_81    schedule 21.12.2020
comment
В настольной версии первое изображение фиксируется при прокрутке. Я также хочу это на мобильных устройствах.   -  person Jessen    schedule 21.12.2020


Ответы (1)


Вместо использования background-image я просто использую background с сокращенными свойствами. Я также удалил min-height: 300px !important;, поскольку он не нужен.

Это должно сработать.

.wp-block-cover {
    background: transparent url(https://stadtpampa.de/wp-content/uploads/2020/12/Schoenower-Heide-Auf-der-Aussichtsplattform.jpg) no-repeat top center;
    background-attachment: fixed;
    background-size: 400px;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}
person sagar1025    schedule 21.12.2020
comment
Благодарю вас! Мне просто нужно было сделать небольшое изменение с background-attachment на «position», и это было так, как мне нравилось. Спасибо!! - person Jessen; 21.12.2020