响应式图片

第一种解决方法： img标签的srcset属性 参考img

1. src 属性是 1x 候选项。1x代表DPR(设备像素比)为1,可以根据不同DPR来选择不同尺寸的图片

<img src="mdn-logo-sm.png" 
      alt="MDN" 
      srcset="mdn-logo-HD.png 2x">

2. 当使用 'w' 描述符时，src 属性会被忽略。当匹配了媒体条件 (min-width: 600px) 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。

<img src="clock-demo-thumb-200.png" 
      alt="Clock" 
      srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
      sizes="(min-width: 600px) 200px, 50vw">

3. 兼容性并不是很好，IE没有实现，移动端只有iOS实现

PC端IE没有实现 移动端只有iOS实现

第二种解决方法： <picture>

1.使用 media 属性 如果这个媒体查询匹配结果为 false，那么这个<source>元素会被跳过。

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo.png" alt="MDN">
</picture>

2.使用 type 属性，srcset 属性指向的资源指定一个 MIME 类型，如果用户代理不支持指定的类型，那么这个<source> 元素会被跳过。

<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

3.兼容性比img标签的srcset稍微好一些，但是也有很多不足，不过还有有一个辅助工具picturefill.js可以帮助我们解决这些兼容性。

PC image.png