在自适應網頁布局中，特别是在移動端，我們偶爾會需要某一進制素寬高等比例自适應，方形圖檔最為常見。若隻是單純在移動端表現，寬高樣式統一使用相同vw機關就可以實作等比例自适應，而需要考慮多終端時，如果不考慮使用JS運算，還可以用如下代碼實作：
#container {
width: 80%;
height: 500px;
}
.attr {
width: 50%;
height: 0;
padding-bottom: 50%;
background-color: #008b57;
}
或者：
.img-div {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
}
img {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
從以上兩段代碼原理不難看出共同點，樣式都利用了padding-bottom百分比值是相對父元素的寬度來算這個知識點，不得不說這樣處理也是十分巧妙。