強制縮小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像素渲染一個完整的視網膜圖像質量有足夠的像素。）