背景大小：封面在 android 本机浏览器中不起作用答案

【问题标题】：background-size:cover not working in android native browser背景大小：封面在 android 本机浏览器中不起作用
【发布时间】：2013-12-08 09:41:08
【问题描述】：

我正在尝试使用background-size:cover 将背景图像适合其容器。这是我的小提琴：The Fiddle

它适用于所有浏览器，但不适用于 Android 原生浏览器.. 请问有人有什么解决办法吗？谢谢

【问题讨论】：

【解决方案1】：

在搜索了这个问题并没有找到解决方案后，我从 CSS 文件样式中删除了 background-image 并在 HTML 代码中使用了内联样式。 android原生浏览器的问题解决了。

我更新了小提琴，它在安卓原生浏览器中运行。

似乎android在解析背景格式方面也有问题：

background: url('...') fixed center center / cover;

我们应该将背景图像与其他图像分开并内联使用，然后在 css 文件中分别使用每个选项，如下所示：

background-size: cover;
background-position: center center;

【讨论】：

@R.Bosma 有帮助地添加了一个建议（尽管可能会删除一个答案，因为它的内容更适合评论）：“不要使用背景附件：已修复。否则没有缩放将在 Android 设备上应用。本地和滚动似乎工作正常。"
它适用于使用html, body {...} 而不是body {...}。

【解决方案2】：

很遗憾，旧版本的 Android 原生浏览器和 Android 版 Chrome 并不完全支持 background-size 属性。我经历了艰难地发现这一点的痛苦。不要使用“cover”作为值，而是执行以下操作：

background-size: 100% auto;

这样做的目的是为您提供与“封面”相同的水平感觉，然后自动设置图像的高度，假设图像具有固有尺寸。

如需进一步阅读，我建议深入了解detailed writeup from Sara Soueidan。

【讨论】：

【解决方案3】：

我在使用背景尺寸时遇到了同样的问题：封面，图像适合设备的宽度，下方是白色背景，当我使用此 css 设置背景颜色时，它已修复：

background-color: #fff;

或简写：

background: #fff url('http://cdn.stupiddope.com/wp-content/uploads/2013/06/IMGP3540.jpg') no-repeat scroll center center / cover;

选择哪种颜色并不重要，因为它是不可见的。

【讨论】：