请问，如何通过CSS实现高度height随宽度width变化而变化，保持长宽比例不变，宽度是根据父元素宽度变化的？

html:
<div class = "father">
    <div class = "daughter"></div>    // 父女情深
</div>

css:
.father {
    width: 70%;
}
.daughter {
    width: 90%; height: 0;
    padding-top: 60%;
    background: black;
}

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