padding으로 비율 고정하기

[HTML]

<div class="container">
    <div class="inner">
        <p class="inner_txt">16 : 9</p>
    </div>
</div>

 

[CSS]

.container {
    width: 200px;
}
.inner {
    background: orange;
    /* padding-top: 50%; */
    /* padding-top: calc(200px * 0.3); */
    /* padding-top: calc(200px / 16 * 9); */
    /* padding-top: calc(100% / 16 * 9); */
    padding-top: 50%;
    position: relative;
}
.inner_txt {
    position: absolute;
    top: 0;
    left: 0;
}