导语：我们经常会碰到这样的需求：要求div高度跟随宽度变化而变化。在手机端，一张图片作为div的背景图，图片宽高比不一致，并要求div宽高比与图片宽高比一致；怎么实现这种需求呢？
原理
padding-top: 50%;用这个属性的百分比，padding-top的百分比是相对于父元素的宽度，比如：父元素宽度100px，那子元素高度50%就是50px
<header>
</header>
<style>
.parent{
width: 120px;
}
.parent .child{
width: 100%;
height: 0;
padding-top: 50%; // 实际为60px
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>