在Chrome瀏覽器上縮放圖片但不是Firefox的圖片質量問題？

我有一個大的圖像（728像素×546像素），我需要在瀏覽器中縮小比例（寬度：179px和高度：自動）。在Chrome瀏覽器上縮放圖片但不是Firefox的圖片質量問題？

當我在Firefox中這樣做時，結果看起來不錯。但是，當我在Chrome中執行此操作時，完全相同的代碼和圖像看起來不同而且遠遠遜色。

在Chrome中使縮減圖像看起來更好嗎？

這裏是一個小提琴例子......如果你看一下在前臺，或前甲板艙口的葉子，你會看到他們在Firefox看起來好多了：

<img src='http://www.wisconsinrivertrips.com/wp-content/uploads/2014/10/DSCN0544.jpg' style='width:179px;height:auto' />

https://jsfiddle.net/qr067gg9/

這裏也是兩側的截圖並排：

http://i.imgur.com/J0T2GeY.png

來源

2017-02-04 user2662680

這似乎是在瀏覽器的錯誤。見here

和可能的解決方法從this問題：

img { 
 
    width: 179px; 
 
    height: auto; 
 
} 
 

 
.crisp { 
 
    image-rendering:-webkit-optimize-contrast; 
 
}

<img src='http://www.wisconsinrivertrips.com/wp-content/uploads/2014/10/DSCN0544.jpg' /> 
 

 
<img class="crisp" src='http://www.wisconsinrivertrips.com/wp-content/uploads/2014/10/DSCN0544.jpg' />

來源

2017-02-04 21:15:47 sol

感謝您的建議。我確實嘗試了「圖像渲染：-webkit-optimize-contrast;」，但在大多數情況下，小圖像變得過於鋸齒，所以這不起作用。 Firefox的圖像看起來仍然優越。 – user2662680

您是否考慮過根據媒體查詢以自然分辨率加載多個圖像大小？換句話說，瀏覽器沒有調整任何東西。 – sol

是的，我考慮過這個。但是，由於各種各樣的原因，這在我的情況下不幸是不可行的。 – user2662680

在Chrome瀏覽器上縮放圖片但不是Firefox的圖片質量問題？

回答

相關問題