Swiper Slider 响应式背景图片

Question

我在图片幻灯片中使用滑动器，每个 div 都有一个背景图片，但我怎样才能使背景图片响应？

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

谢谢。

这是我们购买的主题： 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

也许你应该试试这个，要摆脱重复的图像或白色背景，使用 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;
}
}

Swiper Slider 响应式背景图片

Swiper Slider Responsive background Image

css

swiper