缩小时过大的图像模糊答案

【问题标题】：Oversized image is blurry when reduced缩小时过大的图像模糊
【发布时间】：2012-04-18 04:10:16
【问题描述】：

这是我第一次尝试响应式设计，如果这是一个愚蠢的简单问题，请原谅。

我创建了一个图像并将其最大宽度设置为不大于图像的实际宽度，因为我知道按比例放大图像会导致模糊不清。

我有点困惑的是，当我收缩窗口并且 img 开始缩小时，它也变得模糊......

这是正确的行为吗？有什么办法可以解决这个问题吗？

任何帮助表示赞赏！

【问题讨论】：

【解决方案1】：

如果您使用 Fire Fox，据报道在缩小图像时会遇到问题。

显然，在 CSS 中添加以下内容已经解决了一些问题

image-rendering: -moz-crisp-edges;

【讨论】：

我正在使用 Firefox，实际上当我在 Safari 中查看时，它似乎正确显示。它似乎确实是特定于 Firefox 的，但是添加上面的规则确实使图像更加清晰，但实际上它变得更糟了。
我认为暂时是可以接受的，但我需要找到一种更好的方法来以这样的灵活布局显示图像。感谢您的帮助。
很好，虽然问题也在 webkit 中，至少 Chrome 是这样
如果其他人来这里：“图像渲染：优化质量”帮助了我，而没有像“-moz-crisp-edges”那样锐利。
万一其他人再次来到这里：Chrome 仅支持 pixelated 尽管它识别 optimizeQuality 和 optimizeSpeed 但是它什么都不做（至少在使用 background-resize 时不会）。