响应式图片srcset未生效

<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>

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页