<img
srcset="1.png 1920w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
1920px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy"
/>
问题:调节窗口大小没有触发响应式变更图片
原因:在浏览器有缓存中有更高分辨率的图片时不会加载更低分辨率的图片,可以在小窗口下清空缓存,然后就会加载低分辨率的图片
第二种响应式图片方式:通过媒体查询选择图片,img中的图片是没有source匹配的时候被选中
<picture>
<source media="(max-width: 799px)" srcset="./elva-fairy-480w.jpg" />
<source media="(min-width: 800px)" srcset="2.png" />
<img src="3.png" alt="Chris standing up holding his daughter Elva" />
</picture>