Question

我的页面包含如下例所示的图像。图像的宽度取决于浏览器的宽度和高度正在进行自动更改（类似）。

在除IE之外的所有浏览器中调整大小后，此图像看起来不错（我在IE7和IE6中测试过）。在IE图像看起来很难看。有些部件比应有的厚，有些部件更薄。

alt text http://img39.imageshack.us/img39/7202/88017917.png

我几乎可以肯定，这是由于IE不使用平滑。但我想知道如何解决这个不愉快的问题？

我没有ie7但这段代码应该可以正常工作。但是如何解决ie6？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    img { -ms-interpolation-mode:bicubic; }
  </style>
</head>
<body>
  <div style="width: 50%;">
    <img src="pp.jpg" width="100%">
  </div>
</body>
</html>

From flickr devs:

IE 6是一个风险更大的命题，但可以显示改进的图像大小调整时 AlphaImageLoader CSS过滤器是应用，常用的过滤器相同用于正确显示PNG alpha透明度。例如，过滤：进程id：DXImageTransform.Microsoft.AlphaImageLoader （SRC = '/路径/到/ image.jpg的'， sizingMethod = '规模'）;.虽然有没有透明度适用于此，应用的大小调整方法给出了一个更高质量的结果。

我无法让它工作，实际上我从未使用过滤器。也许有人可以给我工作代码？

Answer 1

Joel Spolsky最近在这个博客上发布了一个解决方案： http://www.joelonsoftware.com/items/2008/12/22.html

将以下内容添加到CSS：

img { -ms-interpolation-mode:bicubic; }

最好的解决方案是使用不需要通过浏览器扩展的图像，但CSS Joel建议有很大改进。

Answer 2

Unstoppable Robot Ninja有一篇文章包含更多信息和一些代码，以使其适用于IE6和IE7。

问题不是IE特定的，而是特定于平台的。 Firefox，Safari等都使用自己的渲染引擎，比原生Windows缩放更平滑。

我建议在Conditional Comments中添加CSS声明或JavaScript代码，因此非IE浏览器不必下载额外代码或发出其他请求。这也可以保证您的CSS清洁有效。

在IE中缩放图像

2 个答案: