CSS根据宽度定义元素高度

CSS根据宽度定义元素高度

css中可通过padding-top/padding-bottom根据父级的宽高进行当前div的高度赋值。
padding中使用百分比会基于父级的宽(top/bottom)、高(left/right)进行计算，所以当高度为0时，即可通过设置padding来进行基于父级宽度的百分比赋值。

.a{width:400px;height:400px;background:#000;}
.b{width:50%;height:50%;background:#6cf;}
.c{width:50%;height:0;padding-top:50%;background:#f0f;}

<div class="a">
	<div class="b">
		<div class="c"></div>
	</div>
</div>