Html 在 Chrome 中模糊缩小的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37906602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blurry downscaled images in Chrome
提问by NoDisplayName
I am using gravatars and it's rather often when I downscale them with css, and I believe Google Chrome used to do it properly until recently ( I may be wrong, not sure when exactly the problem started to occur ) but now, images get blurred when downscaled, and that happens only in Chrome, FF downscales pretty good. I tried using image-renderingbut it doesn't solve the problem. Can someone give me a hint what is the best way to go about it?
我正在使用 gravatars，当我用 css 缩小它们时经常会出现这种情况，而且我相信谷歌浏览器直到最近才正确使用它（我可能错了，不确定问题何时开始发生）但是现在，图像变得模糊时缩小，这仅在 Chrome 中发生，FF 缩小相当不错。我尝试使用image-rendering但它不能解决问题。有人可以给我一个提示，最好的方法是什么？
The example can be found here, open it in Chrome and then in FF, it should be way more blurred in Chrome than in FF.
该示例可以在这里找到，在 Chrome 中打开它，然后在 FF 中打开它，它在 Chrome 中应该比在 FF 中更模糊。
Thank you
谢谢
回答by pastullo
I found the exact same issue on Mac: Firefox downscale the image really well, while chrome makes it look blurry, which is very bad. I couldn't care less about rendering time or speed, i need the logo to look GOOD!
我在 Mac 上发现了完全相同的问题：Firefox 非常好地缩小了图像，而 chrome 使它看起来模糊，这非常糟糕。我不在乎渲染时间或速度，我需要徽标看起来不错！
I found the the following CSS rule fixes Chrome for Mac
我发现以下 CSS 规则修复了 Chrome for Mac
image-rendering: -webkit-optimize-contrast;
回答by delaio
I propose another track because I was in the same situation: images slightly blurred under chrome but impeccable under firefox. Ctrl + "0"solved the problem. I had to one day use the zoom (Ctrl + "+"or "-") and did not reset it completely ...
我建议另一首曲目，因为我处于相同的情况：图像在 chrome 下略微模糊，但在 Firefox 下无可挑剔。Ctrl + "0"解决了这个问题。有一天我不得不使用缩放（Ctrl + "+"或"-"）并且没有完全重置它......
回答by ShaneDaugherty
I've found that the best way to resolve this issue is to just use an svg. Another option is to use css media queries to load adaptive images sizes.
我发现解决此问题的最佳方法是仅使用 svg。另一种选择是使用 css 媒体查询来加载自适应图像大小。
