Javascript 在手机中滑动滑动高度拉伸图像
我有一个带有背景图像的div,在桌面上看起来非常好。但当我切换到移动设备时,图像会从上到下拉伸,在内容和旋转木马之间创造了大量空间,两者都在div内 以下是swiper幻灯片代码:Javascript 在手机中滑动滑动高度拉伸图像,javascript,css,html,swiper,Javascript,Css,Html,Swiper,我有一个带有背景图像的div,在桌面上看起来非常好。但当我切换到移动设备时,图像会从上到下拉伸,在内容和旋转木马之间创造了大量空间,两者都在div内 以下是swiper幻灯片代码: .swiper-slide { text-align: center; font-size: 18px; height: 550px; /* Center slide text vertically */ display: -webkit-box; display
.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
});
下面是一些截图,向您展示我的网站上正在发生的事情。
用这个解决了这个问题
@media (max-width: 767px) {
.swiper-slide {
height: 350px;
}
}
你能在JSFIDLE.net上复制它吗?也添加HTML。