[웹디자인] 가로세로 비율이 일정한 요소

hltml

<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;
}

padding-top = (세로비율 / 가로비율 * 100)%

padding-top: 133%; /* 3:4 비율 */
padding-top: 56.25%; /* 16:9 (유튜브 영상) */