高分辨率图像 IE 浏览器渲染

Posted 2023-03-05

【中文标题】高分辨率图像 IE 浏览器渲染

【英文标题】：High Resolution Image IE Browser Rendering

【发布时间】：2012-04-23 21:59:04

【问题描述】：

我正在针对这些更高分辨率的显示器（尤其是新 iPad）优化我的网站。我已经按照我想要的方式格式化了网站，我只是增加了每个图像的分辨率，但仍将其限制为我目前拥有的 DIV。例如，我有一个分辨率为 483x246 的图像，我让它适合设置大小为 188x96 的 DIV。

这些图像在 Chrome、Firefox 和最重要的是在新 iPad 上看起来很棒。即使放大它也很漂亮和清晰（与我的旧 188x96 图像在放大时看起来模糊和像素化相反）

当我在 IE 中打开页面时，问题就出现了。它以正确的大小显示图像，但呈锯齿状。请参阅下面的比较链接。我知道这是 IE 动态调整大小和渲染图片的方式的问题。

我的问题是，有没有办法让 IE 很好地显示图片？如果没有，有没有办法可以输入代码，以便如果它检测到 IE，它会显示我的旧低分辨率图像？我到处寻找，但没有发现任何与我的具体问题有关的东西。我知道这是一个小例子，但我更大的图像做同样的事情并且更引人注目。希望大家能帮忙。谢谢。 :)

比较：

【参考方案1】：

您是否尝试将其放入您的 CSS 中？

img -ms-interpolation-mode: 双三次；

还有这个https://github.com/adamdbradley/foresight.js，看起来很有趣

确保 IE9 未处于兼容模式或 IE7/8 模式...

【讨论】：

谢谢！这有效，但对于早期版本的 IE。 IE 9 仍然显示锯齿状图像。 :( 哦，好吧。我得看看那个脚本。这看起来确实很有趣。再次感谢。

您介意给我发一个示例链接吗？我相信我们可以解决这个问题...您还检查过您的 IE9 不是在 IE7 或 IE8 模式下吗？点击 F12 然后点击浏览器模式：IE...

【参考方案2】：

发生这种情况的原因是因为位图数据实际上在 IE 浏览器中呈现完全不同，IE 所做的事情是它以设定的比例“削减”像素，所以就像每 5 个像素它拉出一个像素并因此使它看起来就像它错过了某些渐变属性。

除了保持纵横比设置外，您对此无能为力，但我想您自己已经知道了