如何防止Chrome中的圖像大小模糊？

如果您使用調整圖像大小，例如顯示調整大小的小圖像，圖像非常模糊;如何防止Chrome中的圖像大小模糊？

<img src="largeimage.jpg" width=30 height=30 \>

它在其他瀏覽器中並不模糊，但在Chrome中，它很模糊。我曾在www.twitter.com上看過，他們的新設計有大量調整大小的圖像，不知何故，他們已設法清除調整大小圖像中的模糊。我試過這些;

image-rendering: crisp-edges; 
image-rendering: pixelated;

但不幸的是，它不能解決問題。

下面是一個比較。在左邊，你可以看到它是相當模糊的，與右邊相比：

什麼是正確的方法來做到這一點？

你可以發佈模糊和原始圖像的比較或提供一個plnker/codepen等？ –

將圖像添加到問題中。 – user3304007

我真的看着twitter.com上調整大小的圖片與螢火蟲和網頁開發工具，但無法找出他們如何設法解決這個問題。 – user3304007

你試過這個嗎？ :)

filter: blur(0); 
-webkit-filter: blur(0); 
transform: translateZ(0); 
-webkit-transform: translateZ(0);

2016-09-06 13:10:27 Quist

我發現它是'transform：translateZ（0）;'這是影響這個，不是太多的過濾器 – rwcorbett

我注意到，當您以特定百分比調整圖像大小時，Chrome會做得更好。例如，如果將375像素圖像調整爲100，則會變得模糊，但如果將200至100的圖像調整大小，則效果會更好，因爲它甚至可以達到50％。

沒有一個可編輯的測試環境，我不確定這是否能解決它，但它值得一試。

2016-09-06 13:27:43 kthornbloom

回答