背景大小：封面导致背景图像在移动 Chrome 中触摸时调整大小答案

【问题标题】：Background-size: cover causing background image to resize on touch in mobile Chrome背景大小：封面导致背景图像在移动 Chrome 中触摸时调整大小
【发布时间】：2016-10-24 17:12:36
【问题描述】：

我在将移动设备页面的背景图像设置为专为移动设备设计的新图像时遇到了问题。该图像设置为background-size: cover，并且在除移动 Chrome 之外的所有内容中都可以正常工作。在移动 Chrome 中滚动时，图像会略微调整大小。该设计还具有绝对页脚。你可以在这里看到它的实际效果：

body {
  height: 100%;
  overflow: scroll;
  }

.image {
  display: block;
  background: url(http://drawingimage.com/files/1/Shrek-Donkey-Beautiful-Image-Drawing.png) no-repeat center bottom;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.footer {
  display: block;
  position: absolute;
  width: 100%;
  bottom: -69px;
  background-color: green;
}

<body>
  <div class="wrap">
    <div class="image">
    </div>
    <div class="footer">
    <p> Footer info </p>
    <p> More footer info</p>
    </div>
  </div>
</body>

【问题讨论】：

如果此处没有任何帮助，您可能需要将此报告为错误。

标签： javascript jquery html css jquery-mobile

【解决方案1】：

如果它覆盖了背景，那么它就会为滚动留下空间。也许约束容器。或者考虑使用任何类型的媒体查询来捕获移动尺寸的问题。将其切换为仅包含在移动设备上。或删除移动设备上的溢出滚动。

【讨论】：

不幸的是，切换到包含和删除溢出滚动都失败了。
我觉得您的问题缺少部分内容...您是否需要图像保持全宽？这看起来像是一种奇怪的解决方案。您可以使用 jQuery 来查找绝对定位的页脚元素的高度，因为它们不是框模型的一部分。然后将图像容器的高度设置为全屏减去页脚部分的差。然后将其限制在容器中并隐藏溢出只是为了安全措施。有几种不同的方法可以解决这个问题。你总是可以有一个不同的移动图像，而且形状也不奇怪。