当通过外部 CSS 或内联样式缩放时，Firefox 会模糊图像。
当我在视觉上缩放图像时，Firefox 3 会使其模糊。 Firefox 2 和其他浏览器不会，这是我所期望的行为。 对于使用 png 或 gif 精灵创建基于网络的游戏来说，这尤其蹩脚。
例如，当在 Firefox 3 中显示 100x100 图像时，如下所示：
<img src="sprite.gif" width="200" />
或者
<img src="sprite.gif" style="width:200px; height:200px;" />
它在 FF3 中看起来模糊，而不是在 IE 中。
关于如何防止这种情况有什么想法吗？
When I visually scale an image, Firefox 3 blurs it. Firefox 2 and other browsers don't, which is the behavior I expect. This is especially lame for creating a web based game using png or gif sprites.
For example, when showing a 100x100 image in Firefox 3 like this:
<img src="sprite.gif" width="200" />
or
<img src="sprite.gif" style="width:200px; height:200px;" />
it looks blurred in FF3, not in IE.
Any ideas on how to prevent this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
我发现了 FireFox 的这个新功能：
http://developer.mozilla.org/En/CSS /Image-rendering
因此，将其放入 CSS 中即可解决此问题：
我想我会分享此信息。 抱歉回答我自己的问题；）
I discovered this new feature of FireFox:
http://developer.mozilla.org/En/CSS/Image-rendering
So putting this in your CSS will fix it:
Thought I'd share this info. Sorry for answering my own question ;)
我自己只是想知道这一点，但它似乎是在 ff3 中硬编码的:(
http://forums.mozillazine.org/viewtopic.php ?f=7&t=752735&p=5008845
ff2 没有做任何插值
IE 默认情况下不会，但你可以打开它：
http://www.joelonsoftware.com/items/2008/12/22.html
I was just wondering about this myself, but it seems it's hardcoded in ff3 :(
http://forums.mozillazine.org/viewtopic.php?f=7&t=752735&p=5008845
ff2 didn't do any interpolation
IE doesn't by default, but you can turn it on:
http://www.joelonsoftware.com/items/2008/12/22.html
您正在将图像从其原始大小放大 - 通常所需的效果是平滑缩放，并且看起来 FFX3 已经开始这样做（我假设双线性过滤）。 我想如果你看看 Safari 和 Opera，你会发现它们也会过滤图像。
You're scaling the image up from its original size -- the desired effect is normally to have smooth scaling, and it would appear FFX3 has started doing this (i assume bilinear filtering). I think if you look at Safari and Opera you'll find they also filter the image.
http://developer.mozilla.org/En/CSS/Image-rendering 仅适用于 Firefox (Minefield/3.6a1pre/Gecko 1.9.2) 的当前主干版本。 Firefox 3.0 中没有此功能，即将发布的 3.5 版本中也不会包含此功能。 具有该选项的第一个版本将是 3.5 之后的下一个主要版本，目前处于早期规划阶段，预计于 2010 年发布。
http://developer.mozilla.org/En/CSS/Image-rendering only applies to the current trunk builds of Firefox (Minefield/3.6a1pre/Gecko 1.9.2). This feature is not in Firefox 3.0 and won't be in the upcoming 3.5 release. The first release with that option will be the next major release after 3.5 currently in the early planning stages with an estimated release in 2010.
默认情况下，Internet Explorer 8 在缩放图像时也会“模糊”图像。 这其实是一件好事。 使用双三次采样而不是最近邻采样缩放时，大多数图像看起来更好。
如果您希望 Internet Explorer 8 像以前的版本一样缩放图像，请将其放入 CSS 中：
如果您希望 Internet Explorer 7 像 IE 8 一样缩放图像，请使用以下内容：
除了图像的外观外，您还必须考虑性能。 我发现，在使用双三次采样时，IE 7 和 IE 8 需要比 Firefox 3.6 更多的 CPU 能力来缩放图像。
Internet Explorer 8 also "blurs" images by default when scaling them. This is actually a good thing. Most images look better when scaled using bicubic sampling instead of nearest neighbor sampling.
If you want Internet Explorer 8 to scale images like previous versions do, put this in your CSS:
If you want Internet Explorer 7 to scale images like IE 8, use this:
Other than the looks of the image, you also have to consider performance. I've found that IE 7 and IE 8 need significantly more CPU power to scale images when using bicubic sampling than Firefox 3.6.
我实际上更喜欢 FF 的方式，因为它在缩放图像时使用插值，在大多数情况下，这使得图像看起来比 IE 中的要好得多。 不过我想在某些情况下它可能不好，比如使用精灵时。
但我认为没有办法解决它。
I actually prefer the way FF does it since it uses interpolation when scaling images, in most cases this makes the images look much better than they would in IE. However I guess there can be cases where it's not good, like when using sprites.
I don't think there's a way to get around it though.
不幸的是，我没有解决方案，但这对于大量用户（例如像素艺术家）来说是一个彻底的破坏。 如果您受到此影响，请将反馈发送至 http://hendrix.mozilla.org/ 并投票支持相应的错误。
令人失望的是 Mozilla 忽视了这个问题。 对于许多受影响的用户来说，这意味着除了切换浏览器之外别无选择。 IE 有一个 CSS 属性 来选择调整大小过滤器，所以这看起来成为最好的选择。
以下是 Google Chrome 的错误报告，其中包含与火狐浏览器同样的问题。 我不了解 Opera，但我听说他们使用一些启发式方法来实现更明智的自动缩放。
Unfortunately I don't have a solution for this, but this is a complete dealbreaker for a large number of users (e.g. pixel artists). If you are affected by this please send feedback to http://hendrix.mozilla.org/ and vote for the corresponding bug.
It is disappointing that Mozilla is ignoring this issue. For the many affected users it means that there is no other choice than to switch browsers. IE has a CSS property to select the resizing filter, so this seems to be the best choice.
Here is the bug report for Google Chrome, which has the same problem as Firefox. I don't know about Opera, but I heard that they use some heuristics for a saner automatic scaling.
我想知道如果您以您希望看到的最大尺寸创建精灵，然后根据需要缩小它们，是否会得到更好的结果？
I wonder if you would get better results if you created the sprites at the largest size you expect them to be viewed, and then scale them down as required?
您应该避免在客户端缩放图像。 向上缩放图像就像缩放一样，浏览器没有图像的信息来以比实际更高分辨率显示它，所以你不能在不模糊图像的情况下做到这一点，也许在 IE 中不明显，尝试一下将 200 像素更改为 400 像素。
You should avoid scaling the image on the clientside. Scaling an image upwards is like zooming, the browser doesn't have the information for the image to display it in higher resolution than it really is, so you can't do that without bluring the image, maybe it's not noticebale in IE, try changing 200px to 400px.