javascript - 移动设备中的滑动滑动高度拉伸(stretch)图像

Question

我有一个带有背景图像的 div，在桌面上看起来非常好。但是当我切换到移动设备时，图像会从上到下拉伸(stretch)，从而在内容和轮播本身之间创建大量空间，这两者都位于 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

Answer 1

用这个想通了

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