비율이 항상 일정하게 유지되는 box

viewport 크기가 변해도, 가로:세로 비율이 항상 일정하게 유지되는 box 를 만들어보겠습니다.
JS 필요없이 CSS 로만 구현 가능합니다.

HTML

<div class="box"> 
    <div class="content">1:1 비율</div> 
</div>

CSS

.box {
    position: relative;
    width: 50%; /* 원하는 너비 */
}

.box:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 비율 */
}

.content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

가로:세로 비율을 2:1 로 하고 싶다면, padding-top 을 50% 로, 1:2 로 하고 싶다면, 200% 로 선언하면 됩니다.
눈치채셨겠지만, padding-top = 세로 / 가로 * 100