Html 试图让一个大的居中背景图像在移动浏览器中工作而不失真

因此，我在本文中使用了以下方法：

以下是我的代码：

css:

html:

---

这在大多数情况下都有效，除了手机浏览器中的高宽比混乱之外

编辑您的媒体查询，如下所示：

@media only screen and (max-width : 1024px) {

#bg {
    left: 50%;
    margin-left: -512px;
    min-height: 1px;
    height: auto;
}

}

---

我要回答我自己的问题。为了使背景图像在移动浏览器中填充页面，同时保持正确的纵横比，必须为纵向/横向模式添加具有重新调整大小图像的媒体查询。

找到了解决方案：

需要添加

html {
    height: 100%;
}

---

这不起作用，使图像默认宽度为100%，并保持高度的纵横比，而不是在纵向模式下填充页面。不，同样的问题，背景的宽度是100%，在纵向模式下高度不能填满页面。哦，那么你想让图像在纵向模式下100%填充高度，但不丢失任何纵横比？如果是这种情况，你必须加载一个不同的图像。明白了，可以了。谢谢。为什么不使用CSS

背景尺寸
？？？这是实现这类功能的标准方法。在手机浏览器中无法按我所希望的方式工作。未按要求填充页面背景大小有许多变体：封面、包含和自定义px或%值。你可以以背景位置为中心，很难相信没有一个适合你的需要。
@media only screen and (max-width : 1024px) {

#bg {
    left: 50%;
    margin-left: -512px;
    min-height: 1px;
    height: auto;
}

}

html {
    height: 100%;
}