滑块革命响应背景大小值

Question

我在WordPress网站上创建了一张幻灯片，我希望幻灯片的背景在桌面上为background-size: cover，在移动设备上为background-size: contain。我试图通过使用像这样的媒体查询来实现这一目标：

@media screen and (min-width: 320px) and (max-width: 675px) {   
.tp-bgimg {
    background-color: rgb(6, 6, 6)  !important;
        background-size: contain !important;
   }
}

但是幻灯片的加载和媒体查询之间存在时间差距，因此我首先将背景视为cover，并在一两秒之后将其更改为contain，我怎么能解决这个问题？

THX

Answer 1

您需要做的更好的解决方案是：

1. 转到滑块设置：
   • 在3中，选择滑块类型：将其设置为标准滑块并加载预设的“幻灯片显示全宽度”。
   • 在4，幻灯片布局中：选择全宽，然后在桌面中将图层网格大小设置为1920px x 1080px。
   • 保存设置
2. 在幻灯片编辑器中：
   • 选择尺寸为1920 x 1080的背景图像
   • 在源设置中：将背景拟合设置为包含，背景位置设置为居中。

使用此配置，您应该可以在任何屏幕尺寸下看到图像拟合。