Chrome 中模糊的缩小图像

Question

我正在使用 gravatars，当我用 css 缩小它们时，它经常出现，我相信谷歌浏览器直到最近才正确地做到这一点（我可能是错的，不确定问题何时开始出现）但现在，图像变得模糊缩小比例，这只发生在 Chrome 中，FF 缩小比例非常好。我尝试使用 image-rendering 但它没有解决问题。有人可以给我提示最好的方法是什么吗？

这个例子可以在 这里 找到，在 Chrome 中打开它，然后在 FF 中打开它，它在 Chrome 中应该比在 FF 中更模糊。

谢谢

原文由 NoDisplayName 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在 Mac 上发现了完全相同的问题：Firefox 很好地缩小了图像，而 Chrome 让它看起来很模糊，这是非常糟糕的。我不在乎渲染时间或速度，我需要徽标看起来不错！

我发现以下 CSS 规则修复了 Chrome for Mac

 image-rendering: -webkit-optimize-contrast;

原文由 pastullo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我发现使用过的 transform: translateZ(0); 是可行的。

通过类似的问题： How to prevent blur on image resize in Chrome?

原文由 liujigang 发布，翻译遵循 CC BY-SA 4.0 许可协议