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;
}

}