引导网站中的滑块图像不适合移动视图

Posted 2023-05-08

【中文标题】引导网站中的滑块图像不适合移动视图

【英文标题】：Slider image in bootstrap website not fitting in mobile view

【发布时间】：2021-09-13 17:31:38

【问题描述】：

我的引导网站中有一个滑块，该网站的链接是here

滑块图像在桌面设备上工作正常，但在移动设备上它不适合屏幕，我做了以下 css：

@media only screen and (max-width: 600px)
.n2-ss-slider [data-mode=fill] .n2-ss-slide-background-image 
    background-size: 400px !important;

这个css昨天工作正常，现在不工作了，谁能告诉我如何使滑块图像适合移动视图的屏幕，提前谢谢

【参考方案1】：

据我所知，这是负责制作图像的 CSS cover（即覆盖整个面板，这使得图像的高度与面板的高度相匹配，将左右边缘推离屏幕） .

.n2-ss-slider .n2-ss-slide-background-image img 
    object-fit: cover;

如果你添加这个 CSS，你应该可以覆盖它：

.n2-ss-slider .n2-ss-slide-background-image img 
    object-fit: fill;