CSS等比列放大縮小效果

 　　這個效果要求是每個item元素的高度都是寬度的2倍，我們首先父元素box設定了寬度100%，這裡我們主要利用padding的一個屬性來解決問題，因為padding的寬度如果是百分數來計算的的話

　　那麼它的實際值都是相對父元素的寬度來算百分數的值，包括 padding-bottom 和 padding-top 也是如此，所以我們這裡寬度可以設定為40%。由於我們這裡box的寬度是100%，而高度沒有告訴，所以不能直接設定高度值來取得效果，我可利用padding-bottom來代替height值，即如上所示，把height設為0，而把padding-bottom設為80%，這樣我們就可以看到效果了，你可以隨意拖放瀏覽器視窗大小，都是等比列縮小放大的哦這個也算是自適應螢幕的一個小方法吧》。。

　　html代碼

代碼如下
<div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

　　css代碼

代碼如下
.item { width:40%; height:0; padding-bottom: 80%; background-color:#f00; float:left; margin:10px 5px;; }