[CSS] 비율을 유지하는 반응형 박스

padding을 사용하는 방법

.container {
    /* height값을 지정해주지 않거나 0으로 지정해주어야한다. */
    width: 200px;
}

.box {
    /* 부모height가 0인 상태에서 자식에서 padding-top을 선언하면, 바로 이 값이 높이가 되게 된다. */
    padding-top: 50%;
    /* calc()를 사용할 수도 있다 */
    padding-top: calc(100% * 0.5);
    /* 16:9 적용 */
    padding-top: calc(100% / 16 * 9);
}

부모의 width가 padding의 기준이 되기 때문에 부모인 container 엘리먼트 요소가 필요합니다.

aspect-ratio를 사용하는 방법

.box {
    /* 16:9 적용 */
    aspect-ratio: 16 / 9;
    /* 고유한 종횡비를 가지는 경우 해당 종횡비를 따르고, 그렇지 않은 경우 1 : 1 비율로 지정 */
    aspect-ratio: auto 1 / 1; 
}

width, height, min-width, min-height 등 너비, 높이 값이 지정되어있는 경우 종횡비가 적용되지 않습니다.

 

해당 포스팅은 이 글을 참고하여 작성했습니다.