Bootstrap响应式图片使用方法

1、打开WebStorm开发工具，新建‘test.html’文件，在文件的同级目录部署安装Bootsrap相关文件，目录结构如下图

3、浏览器查看效果如下图，图片显示的是实际大小，超出了div的边界

5、网页查看效果如下图，即使缩放网页，图片也始终在div中，图片宽度随着网页宽度变化，高度自动变化，img-responsive实际就是width:100%;height:auto

7、网页查看效果如下图，仔细观察发现图片并没有放在匹配所在的div,而是距离右边框很大空白，这是因为即使用了img-responsive，如果图片宽度小于显示的div最大宽度100%，图片显示的宽度就是其实际宽度，而并不会因为div的宽度而放大，这点理解了,img-responsive在相对实际图片来说，只能实现等比例缩小，并不能实现等比例放大，这也是在bootstrap使用时候最好使用大图的原因