CSS修复：图片指定尺寸缩小后模糊不清的问题

发布于：

最近在开发插件的过程中，需要设定支付宝当面付二维码的图片尺寸大小的问题。起初很简单地直接在 <img> 标签中设定 height 和 width 属性，但是很快发现，大小是改变了，但图片质量下滑很严重。这就比较奇怪了，因为指定的图片尺寸，比实际图片的尺寸要小，也就是所是缩小展示，按我日常摄影的直觉，缩小后的图片不应该更锐利清晰才对么。搜索一番最终发现可以用CSS的方式解决：

img {
    image-rendering: pixelated; /*chrome*/
    image-rendering: -moz-crisp-edges;/*Firefox*/
}

考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/image-rendering

其中比较扯淡的是，chrome 浏览器和火狐浏览器还不一致。也没深究其具体原理，总之实际测试，添加上述CSS代码后，不单缩小的二维码丝毫毕现，连放大的也很锐利。就这么着吧。