css - 强制缩小 PNG 导致模糊(Chrome)

Question

我有一张 100 像素宽/100 像素高的 PNG 图片。

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

结果是模糊的。

可能出了什么问题？

Answer 1

这可能是因为 100 像素的正方形并没有精确地划分为 70 像素，浏览器在尝试动态调整图像像素大小和插值时错误渲染了图像的位。试试 max-width: 50px 或 max-width: 75px 看看它是否仍然模糊。

如果您可以除以 2/4/8 的倍数精确到您想要的大小，则调整图像大小会容易得多。

(假设您不在 HiDPI/视网膜屏幕上，在这种情况下，这是因为您在 75 像素正方形处没有足够的像素来呈现完整的视网膜质量图像。)