背景大小覆盖不保持纵横比，Android Chrome

Question

在桌面电脑和iPad上，当元素具有background-size: cover时，背景中的图像保持其宽高比，但在我的Android手机（chrome）上，该图像似乎更像是width:100%;height:100%。

你可以在这里查看实例。 这是我手机屏幕截图。

// Markup
<div class="wrapper">
  <div class="content">
...

// Style
html, body {
  height: 100%
}

.wrapper {
  position: relative;
  height: 100%;
  background-image: url(...);
  background-size: cover;
  ..vendor prefixes..
}

- azium

Answer 1

我曾经遇到过类似问题，但很难进行调试。最终我找到了原因：图片像素尺寸。

简短说明：
不要使用太大的图片，移动设备无法承受它们，使用最多2000像素宽的图片。

---

更多细节

简单来说，移动设备不能处理太大的图片，这取决于型号和操作系统。结果可能会有所不同：有些可能会崩溃，有些显示空白图像或像这个问题中的扭曲，有时甚至会返回404错误！（我也遇到过这种情况）。

我在许多地方（包括SO和其他网站）找到了关于这个问题的信息，这是一篇好文章，其中有一个不错的工具可以计算图像大小：
http://www.williammalone.com/articles/html5-javascript-ios-maximum-image-size/.

从我的测试来看，理想的图片大小不应超过2000像素，主要是为了支持移动设备的最大（也是最古老的）部分，但根据您的需求进行测试是推荐的。

- Gruber

Answer 2

有时候为你的HTML文档定义视口会很有帮助：

html{
  height:100%;
  min-height:100%;
  width: 100%;
  min-width: 100%;
}
body{
  min-height:100%;
  min-width: 100%;
}

在可以使用轮廓的Android Chrome上应该能够很好地处理此问题。

接下来，您可以使用媒体查询创建解决方法，因为您手机上的Chrome无法正确处理cover属性：

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
    .wrapper {
      background-image: url(...);
      background-size: auto 100%;
    }
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
   .wrapper {
      background-image: url(...);
      background-size: 100% auto;
    }
}

这很简单，但功能稳定且表现良好。如果您想将此CSS限制为仅适用于较小的设备，则可以扩展媒体查询，例如

@media screen and (orientation:landscape) and (max-width: 400px) { 添加CSS }

希望这能帮到您，

最好的问候， Marian。

- Marian Rick

---

我并没有使用 width:100%; height: 100%，而是使用了 background-size: cover。 - azium

天哪，真对不起，太愚蠢了。明明有一个换行符，但我把它当作一行来读取了。 - Marian Rick

哦，哈哈，是的，我现在也看到了。 - azium

嘿@azium，我已经更新了我的答案。希望这个解决方法能够为您提供良好的帮助。 - Marian Rick