文章传送门：http://mp.weixin.qq.com/s/OMens6u_ePd0oDSQh-tnLA 主要是讨论如何使图片根据屏幕大小进行自适应。 下面是我的一些实践： HTML代码如下
<body> <h4>图片自适应</h4> <img src="C:\Users\chen\Pictures\实训\捕获4.PNG" alt="img"> </body>此时没有设置任何的css样式，效果如下 可以看到若没有任何样式，屏幕小将会遮盖图片，图片显示不完全。显然，此时的图片大小与他本身大小一样。 上图验证了这个结论。
若设置width=100%呢？是否有用？
<style> .image-example { width: 100%; } </style>看下效果 效果还不错欸！ 但是！！！你会发现若width=100%的话，图片的大小将跟屏幕大小一样。 导致的结果就是，小图片被放大将像素失真。 很明显，上图明明很小，但是由于自适应，被拉伸了。
文章里面思路很清晰，为达到这个目的，可以包裹一层父元素，父元素的宽度根据内容来定。 于是想到了行内元素。 因此，只要图片外面有一层display为inline-block的父元素即可。 HTML
<body> <h4>图片自适应</h4> <img src="C:\Users\chen\Pictures\实训\捕获12.PNG" alt="img" class="image-example"> <div class="image-wraper"> <img src="C:\Users\chen\Pictures\实训\捕获12.PNG" alt="img" class="image-example"> </div> </body>CSS
<style> .image-wraper { display: inline-block; } .image-example { width: 100%; } </style>效果（上面是没有父元素的，下面有）
文章传送门：http://mp.weixin.qq.com/s/OMens6u_ePd0oDSQh-tnLA 再发一次传送门
