img的srcset和sizes让图片缩放保持清晰度

有时候开发大屏项目过程，有时会需要缩放图片或者内容，此时我们如果只设置了src，且设置的是一个相对比较小的图片，那么放大后就会出现图片很模糊，而文字则不会出现类似问题，此时我么就需要用到 srcset、sizes 属性了

ps：平时一般不需要，特殊的项目，或者一些大屏项目才容易见到

下面是正常设置 src，但当缩放时还是这张图片，那就不太合适了

//假设下面使我们的正常图片，设置了src
<img src="https://juejin.com/img/10" alt="" />

img 的 css属性宽高固定，则使用 dpr 来标记，这样在不同的屏幕、不同的缩放情况，可以设置 srcset，这样在不同的 dpr 下，就能看到清晰的图片了

<img srcset="
    https://juejin.com/img/10 1x,
    https://juejin.com/img/11 2x,
    https://juejin.com/img/12 3x,
    https://juejin.com/img/13 4x,
    https://juejin.com/img/14 5x
" 
alt="" />

img 的 css属性宽高不固定(例如：100%、100vw)，使用宽度来标记，可以设置 srcset、sizes 属性，能让其选择更合适的图片

<img 
    srcset="
        https://juejin.com/img/10 150w,
        https://juejin.com/img/11 300w,
        https://juejin.com/img/12 600w,
        https://juejin.com/img/13 900w,
        https://juejin.com/img/14 1200w
    " 
    sizes="
        (max-width: 300px) 150px, //设置了最大宽度
        (max-width: 600px) 300px,
        (max-width: 900px) 600px,
        (max-width: 1200px) 900px,
        (max-width: 1500px) 1200px,
        1200w //匹配不到就是用这个了
    "
    alt="" />