2

我在 IE9 中进行了此操作，但后来试图在 IE8 和 7 中弄清楚它却搞砸了。我在这里和其他地方搜索过，但找不到解决我问题的正确方法。

每当浏览器窗口的大小调整为小于其最大宽度（流体图像）时，我都会尝试在 div 中缩小图像。我假设问题是我正在使用旧版浏览器不支持的 CSS3 属性（背景大小：100%；）。如何使它与 IE9、8、7 兼容？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fluid Image</title>
<style type="text/css">

img {
    max-width: 90%;
    height: auto;
}

.imageContainer {
    width: 900px;
    max-width: 90%;
    margin: 0 auto;
    background-image: url(img/fluidImage.jpg);
    background-position: 0 -450px;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 650px;
}

</style>

</head>
<body>
<div class="imageContainer"></div>
</body>
</html>
4

1 回答 1

0

您可以为此使用一个过滤器：

http://www.pziecina.com/design/turorial_demos/resize_background.php

对于 IE8 之前的使用 -

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg',sizingMethod='scale');

对于 IE8 使用：

-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg',sizingMethod='scale')";

使用 sizingMethod= 'scale' 意味着即使 IE 也会将背景图片缩放到浏览器窗口的大小。

于 2012-09-11T20:20:24.713 回答