滑动滑块响应式背景图像

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;
}
}