在网站中，我们常常需要展示图片，如：商品列表、项目列表、轮播图、banner等。这些图片有的来源有两种：
- 用户自己上传的(用户上传的图片一般会限制体积、比例)
- 设计师提供的(设计师提供的图片一般会是两倍画布或者更高分辨率，为了显示效果更清晰)
出现问题：
当我们展示图片的容器比实际图片要小，这时候会出现一个情况，图片变得模糊了。
通用的解决办法：
样式表中加入以下样式即可解决，图片缩放时保持对比度和边缘
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;
}
这种模糊如果没有对比就不容易察觉，大家可以在浏览器上动态调这个属性，可以很直观的看到改变。
参考：https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
网友评论