响应式图片

1 用百分比设置图片宽度

img {
    width: 100%
}

2 媒体查询设置 <img> 隐藏和显示

.large-logo {
     display: inline-block;
}
.middel-logo {
    display: none;
}
.small-logo {
    display: none;
} 
@media screen and (max-width:1024px) {
     .large-logo {
         display: none;
     }
     .middel-logo {
         display: inline-block;
     }
     .small-logo {
         display: none;
     }
}

@media screen and (max-width:640px) {
    .large-logo {
        display: none;
    }
    .middel-logo {
        display: none;
    }
    .small-logo {
        display: inline-block;
    }
}

3 媒体查询动态设置背景图片

.banner {
    background:url("../images/banner01-small.jpg");
    background-size:100% 100%;
}

@media (min-width:640px) {
    .banner{
        background:url("../images/banner01-middle.jpg");
    }
}

@media(min-width:1080px){
    .banner{
        background:url("../images/banner01.jpg");
    }
}

4 <img> 标签的 srcset 属性和 sizes 属性

<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     src="foo-1280.jpg">

 <img
      srcset="img/homeImg.png 1440w,
              img/homeImgMiddle.png 1024w,
              img/homeImgSmall.png 640w"
      sizes="(max-width:640px) 640px,
             (max-width:1024px) 1024px,
             1440px"
      src="img/homeImg.png">

根据设备像素比自适应图片：

<img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     src="foo-640w.jpg">

5 <picture> 标签，<source> 标签

<picture>
     <source srcset="img/homeImgSmall.png"  media="(max-width:640px)">
     <source srcset="img/homeImgMiddle.png"  media="(max-width:1024px)">
     <source srcset="img/homeImg.png">
     <img src="img/homeImg.png" alt="Banner">
</picture>