iphone - 背景图像在某些浏览器上不流畅

Question

我正在尝试使我的#header 背景图像流畅，以便在任何移动设备上看起来都不错。我正在使用这个模拟器来测试我的网站http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://toarumajutsunoindex.me/，背景图像在 chrome 中没有显示正确的纵横比，但在 Firefox 中它工作正常。我真的不知道它在真正的 iphone 上是否好看。谁能帮我修复背景？

background-image: url(images/header.jpg);
background-repeat:no-repeat;
background-position:top;
background-size: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
width: 100%;

Answer 1

在背景图像（或任何图像）上使用百分比将使其缩放以适应屏幕，从而改变纵横比。如果您不希望这种情况发生，但希望它适合屏幕并保持相同的尺寸，请使用以下代码，否则将“覆盖”更改为 100%。这应该在 chrome 中工作，并且与 -ms-filter 一起它也应该在 IE 中工作。

background: url(images/header.jpg) no-repeat top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.jpg',     sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.jpg', sizingMethod='scale');