Firefox通过外部CSS或内联样式进行缩放时会模糊图像。

Question

当我在视觉上缩放图像时，Firefox 3模糊了它。 Firefox 2和其他浏览器没有，这是我期望的行为。 对于使用png或gif sprites创建基于Web的游戏，这尤其蹩脚。

例如，在Firefox 3中显示100x100图像时，如下所示：

<img src="sprite.gif" width="200" />

要么

<img src="sprite.gif" style="width:200px; height:200px;" />

它在FF3中看起来很模糊，而不是在IE中。

有关如何防止这种情况的任何想法？

Answer 1

我发现了FireFox的这个新功能：

http://developer.mozilla.org/En/CSS/Image-rendering

所以把它放在你的CSS中将解决它：

image-rendering: -moz-crisp-edges;

以为我会分享这些信息。 很抱歉回答我自己的问题;）

Answer 2

我自己只是想知道这件事，但似乎它在ff3中被硬编码:( http://forums.mozillazine.org/viewtopic.php?f=7&t=752735&p=5008845

ff2没有做任何插值

IE默认情况下不会，但你可以打开它： http ： //www.joelonsoftware.com/items/2008/12/22.html

Answer 3

您正在从原始大小缩放图像 - 所需的效果通常是平滑缩放，并且看起来FFX3已经开始这样做（我假设是双线性滤波）。 我想如果你看看Safari和Opera，你会发现它们也会过滤图像。

Answer 4

在缩放图像时，Internet Explorer 8默认情况下也会“模糊”图像。 这实际上是件好事。 使用双三次采样而不是最近邻采样进行缩放时，大多数图像看起来更好。

如果您希望Internet Explorer 8像以前版本一样扩展图像，请将其放入CSS中：

-ms-interpolation-mode: nearest-neighbor;

如果您希望Internet Explorer 7扩展IE 8等图像，请使用以下命令：

-ms-interpolation-mode: bicubic;

除了图像的外观，您还必须考虑性能。 我发现IE 7和IE 8在使用双三次采样时比Firefox 3.6需要更多的CPU能力来缩放图像。

Answer 5

http://developer.mozilla.org/En/CSS/Image-rendering仅适用于Firefox的当前主干版本（Minefield / 3.6a1pre / Gecko 1.9.2）。 此功能不在Firefox 3.0中，也不会在即将发布的3.5版本中。 具有该选项的第一个版本将是目前处于早期规划阶段的3.5之后的下一个主要版本，预计将于2010年发布。

Answer 6

我实际上更喜欢FF的方式，因为它在缩放图像时使用插值，在大多数情况下，这使得图像看起来比在IE中看起来好得多。 但是我想有可能会出现不好的情况，比如使用精灵时。

我不认为有办法绕过它。

Answer 7

不幸的是，我没有这方面的解决方案，但对于大量用户（例如像素艺术家）来说，这是一个完整的决策者。 如果您受此影响，请将反馈发送至http://hendrix.mozilla.org/并投票支持相应的错误 。

令人失望的是Mozilla忽略了这个问题。 对于受影响的用户而言，这意味着除了切换浏览器之外别无选择。 IE有一个CSS属性来选择调整大小的过滤器，所以这似乎是最好的选择。

以下是Google Chrome的错误报告 ，它与Firefox存在同样的问题。 我不知道Opera，但我听说他们使用一些启发式算法进行更灵活的自动缩放。

Answer 8

我想知道如果你创建了你期望它们被查看的最大尺寸的精灵，然后根据需要缩小它们，你会得到更好的结果吗？

Answer 9

您应该避免在客户端上缩放图像。 向上缩放图像就像缩放一样，浏览器没有图像的信息以比实际更高的分辨率显示它，所以你不能在没有模糊图像的情况下这样做，也许它不是IE中的注意事项，试试将200px更改为400px。