html - 在 IE9 中缩小图像质量不佳

标签 html internet-explorer rendering internet-explorer-9 image

我注意到 IE9 以非常低的质量呈现缩小图像:如果我在 200x150 IMG 标签中显示 800x600 jpg 图像,IE9 中的结果非常令人失望。

同一页面在 IE8 和 Chrome 中显示完美。 IE7 也可以,只要我使用 CSS 样式 -ms-interpolation-mode: bicubic;)。 Firefox 显示与 IE9 相同的令人沮丧的结果,但这似乎是一个已知错误,请参见 https://bugzilla.mozilla.org/show_bug.cgi?id=486918

我搜索了 Stack Overflow 和其他论坛,但没有发现任何关于 IE9 渲染与 IE8 对比的投诉。

有谁知道这是 IE9 中的一个错误。有解决方法吗?

我无法提交图片,因为我是 Stack Overflow 的新用户。 但是您可以轻松重现该问题:

在 Paint.Net 中创建一个 800x600.jpg 的画笔宽度为 1 或 2 的椭圆。 在 200 像素 x 150 像素的 IMG 标签中显示此图像 比较 IE9 与 Chrome 和 IE8(使用 IEtester)

最佳答案

默认的 ie image resize 算法不是很好。正如您所注意到的,IE7 添加了更改算法的功能:

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

这在IE9中被拿走了according to the docs page ,但他们没有提供任何关于使用什么的信息。如果您可以设法调整图像大小而不是在浏览器中,那么您将获得最佳结果。

根据您的用例,您可以在较新的浏览器中使用 Canvas 以获得更好的结果。 Resizing an image in an HTML5 canvas 中接受的答案看起来很有前途:)

关于html - 在 IE9 中缩小图像质量不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6126817/

相关文章:

ruby-on-rails - 在 Rails 3.1 中渲染后如何执行一些任务

c++ - OpenGL glCreateProgram() 总是返回 1 并删除之前的程序

javascript - 如何在对话框工具栏 Vuetifyjs + Vuejs 下截取抽屉导航

javascript - 有没有使用 JavaScript 按值从 <select> 获取 <option> 的快速方法?

javascript - 使用 mix-blend-mode 的暗模式 : difference not working

html - 链接到 Web 应用程序中的本地内容

css - ie7底部滚动条 hell

html - IE 9+ 以不同方式渲染空间

reactjs - 渲染组件与返回 JSX 的函数的优点 [React]

javascript - 单击切换选定的 div 的类并更改未选定的 div 的类