安信娱乐谁是老板

拼图开发文档

响应图

一般情况下,在项目中响应图片大小,则会用到上一节排版辅助里的.img-auto来适应不同的终端大小;在项目应用中,也可以根据终端的不同,使用不同的图片,这时就会用到响应图标签picture

宽度响应

如下例子中针对不同屏幕宽度加载不同的图片;当页面宽度在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" />