移动设备中滑动高度拉伸图像

Question

我有一个div的背景图像看起来在桌面上非常好。但是当我切换到mobile时，图像从上到下被拉伸，在内容和轮播本身之间产生了很大的空间，而轮播本身都在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;
}

注我将高度设置为固定的550px，我知道这是问题所在。我的问题是如何使高度的东西，而在移动，使它可以看起来一样，在桌面。

下面是我正在使用的特定轮播的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;
    }
}