网页中图片保持清晰的秘诀

记住一个公式：

原始尺寸=样式尺寸*缩放比例

只要满足以上公式，你的图片在网页中就会保持清晰。

解释：

1、原始尺寸：图片设计出来时的尺寸，如下84*85

2、样式尺寸：你在代码中设置的尺寸80*60

3、缩放比例：浏览器的缩放倍数，通过window.devicePixelRatio可以获取

结论：

当原始尺寸>=样式尺寸*缩放比例时，图片处于清晰的状态。

当原始尺寸<=样式尺寸*缩放比例时，图片处于模糊的状态。

通常情况下，浏览器的显示比例为100%不变，想要你的图片保持清晰。要么增加图片的原始尺寸，要么减小代码中设置的样式尺寸。