滑块旋转响应背景大小值

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，知道怎么做我解决了这个问题？

谢谢

Answer 1

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

1. 转到滑块设置：
   • 在3中，选择一种滑块类型：将其设置为标准滑块并加载预设的幻灯片全宽。
   • 在 4、幻灯片布局中：选择全宽并在桌面中将图层网格大小设置为 1920 像素 x 1080 像素。
   • 保存设置
2. 在幻灯片编辑器中：
   • 选择尺寸为 1920 x 1080 的背景图片
   • 在源设置中：设置背景适合包含，背景位置为中心顶部。

使用此配置，您应该会看到适合任何屏幕尺寸的图像。