响应式图像--图片自适应大小

1、响应式图像
      
根据不同的屏幕分辨率，和设备像素比来尽可能选择高分辨率的图片。
或者换个角度来说，当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽啦。
      
代码如下：

<img src="..." class="img-responsive" alt="响应式图像">

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}
 

 

（1）display:inline-block 元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。
（2） height:auto，相关元素的高度取决于浏览器。
（3）max-width : 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。