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

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

CSS 属性 image-rendering 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。举个例子，如果有一张尺寸为 100×100px 的图片，但作者有意将尺寸设置为 200×200px（或 50×50px），然后，图片便会根据 image-rendering 指定的算法，缩小或放大到新尺寸。此属性对于未缩放的图像没有影响，最终可以用 CSS 的方式解决：

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

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

已有 590 人购买

• 永久更新：
• 演示数据：

此资源下载价格为2元立即购买（VIP 免费）立即升级

查看演示升级 VIP立刻购买

咨询客服 咨询客服

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！