滑块旋转响应背景大小值
Slider revolution responsive background-size value
我在我的 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
, 知道如何解决这个问题吗?
感谢
更好的解决方案是:
- 转到滑块设置:
- 3、Select一种滑块类型:将其设置为标准滑块并加载预设幻灯片全宽。
- 在 4、幻灯片布局中:select 全宽和在桌面中将图层网格大小设置为 1920px x 1080px。
- 保存设置
- 在幻灯片编辑器中:
- Select 尺寸为 1920 x 1080 的背景图片
- 在源设置中:将背景适合包含,背景位置设置为居上。
使用此配置,您应该会看到适合任何屏幕尺寸的图像。
我在我的 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
, 知道如何解决这个问题吗?
感谢
更好的解决方案是:
- 转到滑块设置:
- 3、Select一种滑块类型:将其设置为标准滑块并加载预设幻灯片全宽。
- 在 4、幻灯片布局中:select 全宽和在桌面中将图层网格大小设置为 1920px x 1080px。
- 保存设置
- 在幻灯片编辑器中:
- Select 尺寸为 1920 x 1080 的背景图片
- 在源设置中:将背景适合包含,背景位置设置为居上。
使用此配置,您应该会看到适合任何屏幕尺寸的图像。