需求
在一個(gè)產(chǎn)品列表中，有若干個(gè)item，每個(gè)item都左浮，并包含在自適應(yīng)瀏覽器寬度的父元素中。在保持item寬高比例固定的情況下，使item元素可以和父元素同比縮放。

方法

.item{
    float: left;
    width: 20%;
    height: 0;
    padding-bottom: 40%;   
}

上面代碼實(shí)現(xiàn)了item元素寬高比例固定為1 : 2，并且與其父元素同比縮放。

• 如果一個(gè)元素的height值是百分比，這個(gè)百分比值是相對其父元素的寬度而言的，即使對padding-bottom和padding-top也是如此；
• 計(jì)算overflow時(shí)，元素內(nèi)容區(qū)域（width和height對應(yīng)區(qū)域）和padding區(qū)域一起計(jì)算，即使overflow: hidden;，padding區(qū)域也會顯示；
• 綜上，可以用padding-bottom代替height，將height的值設(shè)為0，使元素的高度等于padding-bottom的值。

參考 Zihua Li