我在不同的浏览器上显示缩放背景时遇到了一些困难。我在 Google chrome 浏览器上创建了该网站,但在 iPhone 或更早版本的 IE 上加载该网站时,背景无法缩放,或者根本不显示。
我只是使用了css代码:
背景尺寸:100% 150%;
然后我将其更改为:
背景尺寸:自动;
但这仍然会带来一些麻烦。知道如何在从版本 6 到现在的每个浏览器和 IE 上调整/缩放此图像的大小吗?
编辑
使用下面的代码,一切都可以在 Chrome、FF 和最新的 IE 上运行,但在 IE8(以及我认为以下)上,它显示了未拉伸的图片。在 iPhone 上,它根本不显示任何内容。:/
#head-div
{
padding-bottom: 15%;
width: 100%;
background: url(../img/banner.gif) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/banner.gif', sizingMethod='scale');
}