Swiper滑子响应背景图像

Question

我使用swiper进行图像幻灯片，每个div都有背景图像但是如何使背景图像响应？

因为当我调整窗口大小时，图像看起来像裁剪

感谢。

这就是我们买的主题： https://www.templatemonster.com/demo/61311.html#gref

Answer 1

将此添加到您的css文件中。

@media only screen and (max-width: 991px){
    .swiper-slide {
        background-size: contain !important;
        background-repeat: no-repeat;
        background-position: 0 50px !important;
    }
}

这将使背景图像响应。但我建议你按照原样保留设置。因为我们无法编辑滑块的高度，所以图像和标题之间存在白色间隙。

Answer 2

也许你应该尝试这个，并摆脱重复的图像或白色bg，使用background-size：cover;

@media only screen and (max-width: 1170px){
.swiper-slide {
    background-size: cover ! important;
    background-repeat: no-repeat ! important;
    background-position: 0 0 !important;
    height: 480px ! important;
}
.swiper-container{
    height: 600px;
}
}