Bootstrap 样式之 响应式图片的处理

在实际的开发过程中，利用Bootstrap 制作响应式网站，很多时候会涉及到图片的处理问题，

也就是图片的缩放问题，我们先来看看自然情况下的图片显示：（测试版本 3.x）

情景：假设我们在一个 div 中放置一张图片，div 的宽高都是160px,图片的宽高也是160px；

          那么图片是刚好适应这个 div 的；

         

现在：我们要在更小的屏幕的上显示，为了更好的显示，我们缩小div 为80px 宽高，

           这样我们的图片就会出现溢出div，也就是比div要大，跑出来了；

         

处理：我们需要给div中的图片设置最大宽度：max-width:100%; 高度：height：auto；

         也就是让图片的大小随着父级元素div 的变化而缩放；

Bootstrap 的响应式图片就是按照这样进行缩放处理，看看Bootstrap中的样式：

在bootstrap中如何使用响应式图片？

<img src="..." class="img-responsive" alt="Responsive image">

简单的添加 class="img-responsive" 即可，很简单；