图片缩放模糊问题

在网站中，我们常常需要展示图片，如：商品列表、项目列表、轮播图、banner等。这些图片有的来源有两种：

1. 用户自己上传的(用户上传的图片一般会限制体积、比例)
2. 设计师提供的(设计师提供的图片一般会是两倍画布或者更高分辨率，为了显示效果更清晰)

出现问题：

当我们展示图片的容器比实际图片要小，这时候会出现一个情况，图片变得模糊了。

通用的解决办法：

样式表中加入以下样式即可解决，图片缩放时保持对比度和边缘

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