html:

<div class = "father">
    <div class = "daughter"></div> 
</div>

css:

.father { width: 100%; } .daughter { width: 20%; height: 0; padding-top: 20%; background: black; }

主要知识：上下边距的百分比数值是以父元素宽度作为参照的。

css设置容器宽高保持比例