23

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

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

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

或者

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

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

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

4

9 回答 9

36

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

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

所以把它放在你的 CSS 中会修复它：

image-rendering: -moz-crisp-edges;

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

于 2009-04-20T10:15:45.103 回答
5

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

ff2 没有做任何插值

IE 默认没有，但是你可以打开它： http ://www.joelonsoftware.com/items/2008/12/22.html

于 2008-12-23T12:07:56.043 回答
4

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

于 2008-12-23T09:39:42.067 回答
2

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

于 2009-04-20T10:32:16.890 回答
2

默认情况下，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 能力来缩放图像。

于 2010-07-04T04:58:18.160 回答
1

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

我不认为有办法绕过它。

于 2008-12-23T09:40:44.327 回答
1

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

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

这是 Google Chrome 的错误报告，它与 Firefox 有相同的问题。我不了解 Opera，但我听说他们使用一些启发式方法来实现更明智的自动缩放。

于 2009-03-18T11:11:01.247 回答
1

我想知道如果您以您希望它们被查看的最大尺寸创建精灵，然后根据需要缩小它们，您是否会获得更好的结果？

于 2009-05-12T09:13:14.183 回答
0

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

于 2008-12-23T09:41:58.710 回答