响应图

宽度响应

如下例子中针对不同屏幕宽度加载不同的图片；当页面宽度在576px时加载min.png；当页面宽度576px到768px之间时加载small.png

    <picture>
      <source media="(max-width: 576px)" srcset="mini.png">
      <source media="(min-width: 576px) and (max-width: 768px)" srcset="small.png">
      <img src="picture.png" alt="picture">
    </picture>
  

横竖屏响应

除宽度的响应外，还可以根据orientation属性指定横屏landscape或竖屏portrait响应显示图片。

如下示例为分别响应576px以下及576px以上的横竖屏图片。

    <picture>
      <source media="(max-width: 576px) and (orientation: landscape)" srcset="mini_landscape.png">
      <source media="(max-width: 576px) and (orientation: portrait)" srcset="mini_portrait.png">
      <source media="(min-width: 576px) and (orientation: landscape)" srcset="small_landscape.png">
      <source media="(min-width: 576px) and (orientation: portrait)" srcset="small_portrait.png">
      <img src="picture.png" alt="picture">
    </picture>
  

像素密度响应

普通屏和视网膜屏retina对图片的像素要求不同，同时也可以根据像素密度响应显示不同图片。

如下示例当像素密度为2x时加载retina图，像素密度为1x时加载普通图。

    <picture>
      <source media="(max-width: 576px)" srcset="mini.png,mini_retina.png 2x">
      <source media="(min-width: 576px)" srcset="small.png,small_retina.png 2x">
      <img src="picture.png,picture_retina.png 2x" alt="picture">
    </picture>
  

尺寸响应

在图片中添加宽度描述；页面会根据当前尺寸选择加载不大于当前宽度的最大的图片；

    <img src="picture-576.png" alt="picture" sizes="90vw"
      srcset="mini.png 576w,small.png 768w,middle.png 1024w,big.png 1280w,large.png 1680w" />
  

指定宽度响应

如下例子中添加sizes属性；当窗口宽度大于等于768px时加载对应版本的图片，覆盖原来的img属性；

    <source media="(min-width: 768px)" sizes="90vw"
      srcset="new-middle.png 1024w,new-big.png 1280w,new-large.png 2560w">
    <img src="picture-576.png" alt="picture" sizes="90vw"
      srcset="mini.png 576w,small.png 768w,middle.png 1024w,big.png 1280w,large.png 1680w" />