Question

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

- 改变图像的分辨率和尺寸

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

- Site scaling on a mobile device（我尝试通过USB调试测试CSS更改，但它不起作用）

我正在使用由联合主题创建的布鲁克林主题。该网站还使用了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

一个例子很好，所以我们可以看看代码，但通常我会通过添加max-width属性来修复这些问题，如果英雄是全宽并且它是100vw是<img>标记。但如果图片是background-image，则background-size: cover;会很好。

Answer 2

你可以尝试这个css

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

首页英雄背景图片在手机上不正确缩放

2 个答案: