Padding/Margin实现
原理是padding百分比，是基于父元素的。
因为padding-left: 20% = padding-left: 20px都是一样的，因此展示的效果相同。
为了避免过多的嵌套，可以结合伪类使用，例如 JSFiddle - Code Playground
css
<div id="container" class="placeholder">
</div>
#container {
width: 50%;
position: relative;
background-color: red;
/* max-height: 200px; */
/* overflow: hidden; */ /*如果使用margin。需要此触发BFC消除margin折叠的问题*/
}
/* 使用了伪类，这里的padding按.placeholder元素的宽度计算比例值*/
.placeholder::after {
content: '';
display: block;
padding-top: 50%;
}<div id="container" class="placeholder">
</div>
#container {
width: 50%;
position: relative;
background-color: red;
/* max-height: 200px; */
/* overflow: hidden; */ /*如果使用margin。需要此触发BFC消除margin折叠的问题*/
}
/* 使用了伪类，这里的padding按.placeholder元素的宽度计算比例值*/
.placeholder::after {
content: '';
display: block;
padding-top: 50%;
}aspect-ratio
vw 或者 cqw
区别是基于窗口或者父容器的宽度。