首页英雄背景图像在移动设备上未正确缩放答案

【问题标题】：Front page hero background image improperly scaled on Mobile首页英雄背景图像在移动设备上未正确缩放
【发布时间】：2018-04-20 04:15:07
【问题描述】：

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

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

-Unwanted scaling on mobile devices（插入了元标记，但没有传播任何更改，是的，我也清除了缓存）

-Site scaling on a mobile device（我尝试通过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;
}

【问题讨论】：

标签： android ios css wordpress responsive-design

【解决方案1】：

你可以试试这个css

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

【讨论】：

这是朝着正确方向迈出的一步，但现在图像的顶部和底部都有一堆空白

【解决方案2】：

如果英雄是全宽的并且它是@987654323，那么我可以通过添加一个值为100vw 的max-width 属性来解决这些问题。 @ 标签。但如果图片是background-image background-size: cover; 就可以了。

【讨论】：

可以提供网页地址吗？