百分比padding值與等比例頭圖效果實例

實現一個寬高比爲5:1的比例固定頭圖效果

HTML代碼

<div class="box">
    <img src="cover.jpg">
</div>

CSS代碼

.box { 
    padding: 10% 50%;
    position: relative;
}
.box > img {
    position: absolute;
    width: 100%; height: 100%;
    left: 0; top: 0;
}