在網(wǎng)站中兔甘，我們常常需要展示圖片，如：商品列表鳞滨、項(xiàng)目列表洞焙、輪播圖、banner等太援。這些圖片有的來源有兩種：
- 用戶自己上傳的(用戶上傳的圖片一般會(huì)限制體積闽晦、比例)
- 設(shè)計(jì)師提供的(設(shè)計(jì)師提供的圖片一般會(huì)是兩倍畫布或者更高分辨率，為了顯示效果更清晰)
出現(xiàn)問題：
當(dāng)我們展示圖片的容器比實(shí)際圖片要小提岔，這時(shí)候會(huì)出現(xiàn)一個(gè)情況仙蛉，圖片變得模糊了。
通用的解決辦法：
樣式表中加入以下樣式即可解決碱蒙，圖片縮放時(shí)保持對(duì)比度和邊緣
img {
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:-webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
這種模糊如果沒有對(duì)比就不容易察覺荠瘪，大家可以在瀏覽器上動(dòng)態(tài)調(diào)這個(gè)屬性，可以很直觀的看到改變赛惩。
參考：https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
