Swiper-slide高度在手機中拉伸圖像

Question

我有一個背景圖像的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; 
} 

注意我的高度設置爲一個固定的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; 
    } 
}