强制缩小PNG效果模糊（Chrome）

Question

我有100px宽/ 100px高的PNG图像。

我用CSS调整它：img { max-width: 70px }。

结果模糊。

可能会出现什么问题？

Answer 1

这可能是因为100像素的正方形不能完全分割为70像素，浏览器会错误地呈现图像的位，因为它会尝试调整图像的像素并对其进行动态插值。尝试在max-width: 50px或max-width: 75px，看看它是否仍然模糊。

如果您可以将2/4/8的倍数精确分割为您想要的大小，则图像大小调整将变得更容易。

（假设你不是一个HiDPI /视网膜屏幕上，在这种情况下，那是因为你没有在广场960x75像素渲染一个完整的视网膜图像质量有足够的像素。）