css - Swiper slider 响应式背景图像

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

这将使背景图像响应。但我建议您保持原样。因为我们无法编辑 slider 的高度，所以图像和标题之间存在白色间隙。