[CSS] 요소를 비율로 사이즈 적용하기

<div id="outer">
     <div id="inner"></div>
</div>

#outer {
padding-top: calc(100% * 세로비율/가로비율);
position: relative;
}

#inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}