我有一个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
我用这个想出来的
@media (max-width: 767px) {
.swiper-slide {
height: 350px;
}
}