文章傳送門：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%？
若設置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
再發一次傳送門