Swiper-slide изображение с растяжкой по высоте в мобильном телефоне

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

Вот код слайдера:

   .swiper-slide {
    text-align: center;
    font-size: 18px;
    height: 550px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

Примечание. Я установил фиксированную высоту 550 пикселей, что, как я знаю, является проблемой. Мой вопрос заключается в том, как сделать высоту чем-то другим в мобильном телефоне, чтобы она выглядела так же, как на рабочем столе.

Вот javascript для этой конкретной карусели, которую я использую:

 var swiper1 = new Swiper('#swiper2', {
    slidesPerView: 4,
    slidesPerColumn: 1,
    spaceBetween: 30

});

А вот скриншоты, чтобы показать вам, что происходит на моем сайте. http://imgur.com/a/ye542


javascript html css swiper
person ksalah    schedule 03.07.2015    source источник
comment
Вы можете воспроизвести это на jsfiddle.net?   -  person Vlad Zhukov    schedule 03.07.2015
comment
Добавьте HTML тоже.   -  person Razvan Zamfir    schedule 02.11.2018

Ответы (1)


arrow_upward
0
arrow_downward

Разобрался с этим

 @media (max-width: 767px) {
    .swiper-slide {
        height: 350px;
    }
}
person ksalah    schedule 03.07.2015