html - 试图让一个大的居中背景图像在移动浏览器中工作而不被扭曲

Question

所以我使用了本文中的方法：http: //css-tricks.com/perfect-full-page-background-image/

这是我的代码：

CSS：

#bg {
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
position: fixed;
top: 0;
z-index: -1;
width: 100%;
}

@media only screen 
and (max-width : 1024px) {
#bg {
    left: 50%;
    margin-left: -512px;
}

html:

<img id="bg" src="breakfast.jpg">

这在大多数情况下都有效，除了移动浏览器中的高度/宽度比被搞砸了。

Answer 1

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

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

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

}

Answer 2

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

Answer 3

想出了解决办法：

需要添加

html {
    height: 100%;
}