首页英雄背景图片在移动设备上缩放不正确

Question

在我的wordpress网站上，首页英雄的背景在移动设备（iOS和Android）上缩放不正确。它只显示图像的一小部分，而不是完整图像。我试过：

- 更改图像的分辨率和大小

- 移动设备上不需要的缩放（插入了元标记但没有更改，是的，我也清除了缓存）

- 移动设备上的站点缩放（我尝试通过USB调试测试CSS更改，但没有工作）

我正在使用由United Themes创建的布鲁克林主题。该网站还使用Visual Composer。

网站： https://www.wearerubbish.com

当前 CSS

@media (max-width: 767px)
.parallax-section {
    background-position: center center !important;
    background-repeat: repeat-y !important;
    /* background-attachment: fixed !important; */
    background-size: cover !important;
}

Answer 1

一个例子会很好，这样我们就可以看看代码，但通常我通过添加一个值为 100vw 的 max-width 属性来解决这些问题，如果 hero 是全角并且它是一个 <img> 标签。但是，如果图像是background-image则background-size: cover;就可以了。

Answer 2

你可以试试这个css

.hero .parallax-scroll-container { 
    background-size: contain!important;
}