需求
在一個(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è)百分比值是相對(duì)其父元素的寬度而言的凹联，即使對(duì)padding-bottom和padding-top也是如此； - 計(jì)算
overflow時(shí)哆档，元素內(nèi)容區(qū)域（width和height對(duì)應(yīng)區(qū)域）和padding區(qū)域一起計(jì)算蔽挠，即使overflow: hidden;，padding區(qū)域也會(huì)顯示虐呻； - 綜上象泵，可以用
padding-bottom代替height，將height的值設(shè)為0斟叼，使元素的高度等于padding-bottom的值偶惠。
