如何在 IE 中使 css 背景图像成为流体图像答案

【问题标题】：How to make css background-image a fluid image work in IE如何在 IE 中使 css 背景图像成为流体图像
【发布时间】：2012-09-11 19:27:25
【问题描述】：

我在 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>

【问题讨论】：

它必须是背景图像吗？如果你使用的是普通的嵌入图片，你可以强制使用width/max-width进行缩放。
我想将其保留为背景图片，以便为将来可能遇到的任何问题提供答案。
旧版浏览器不支持 background-size 属性。您需要使用 <img/> 对象才能使事情正常进行。
我开始认为你们是对的。
我认为目前最好的解决方案是使用上面提到的标签，同时使用媒体查询。感谢 cimmanon 和 Set Sail Media。引用从CSS Tricks. 到处复制和粘贴的媒体查询时，我确实遇到了一些头痛。提醒一下，不要忘记在媒体查询后加逗号，否则它将不起作用。

标签： css internet-explorer

【解决方案1】：

您可以使用一个过滤器：

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 也会将背景图片缩放到浏览器窗口的大小。

【讨论】：

我应该早点发布这个，但是我在发布之前遇到了这两个过滤器，并且在图像宽度被拉伸时遇到了问题。过滤器似乎没有相应地调整高度。也许我的 CSS 错了？这两个过滤器仅将图像宽度调整为 div 的 100%。我一直在试图弄清楚如何将高度与宽度成比例地缩放。知道如何调整高度吗？
我上面链接的页面提到这些过滤器不处理纵横比以及 CSS3 代码，所以这可能是问题所在。它还建议将过滤器代码包装在 IE 条件语句中，以仅使用 IE8 并减少使用这些过滤器，因为 IE9 应该可以使用 CSS3 代码 afaik。