需求：
一張圖片寬度要求在不同分辨率的屏幕下都能達到100%滿屏的寬度，圖片不能變形。
<div class="img"><img src="1.jpg" alt="測試圖片"/></div>
第一反應是，根據圖片的寬高比設置圖片的高度，如：圖片是1920*1080的，那么設置.img的樣式為：
再看效果，完美展示。任務完成。
可是，這是真的嗎？
當我們把img換個標簽，圖片作為背景圖片展示的時候，發現並不是我們想的這樣，height為0，這什么鬼。
事實上是，高度是相對於父級高度的百分比，前提是父級設置了高度，就是說父級的高度一定要有一個具體的值，如果父級完全是由內容撐起來的高度的話，瀏覽器會認為父級高度為0，所以不管你的子集設置的高度是百分之多少，瀏覽器渲染出來的結果都為0。
前面的方法能夠奏效，原因並不是.img設置了一個height的高度，而是因為img自動撐起來的高度。
所以這個方法並雖然解決了當前的需求，但是當我們要求把img標簽改為背景圖片的時候，就無法實現了。
換個思路，既然height的百分比不是相對於寬度的，那么有沒有相對於寬度多少的百分比數值呢？
有，那就是padding和margin。
這兩者的值設為百分比的話，是完全相對於寬度來的。
那么此時.img的高度與寬度完全一致，利用這一特性，可以完美實現上述需求。
充分利用padding的百分比值是相對於寬度的值這一特性。