CSS aspect-ratio 속성 (요소의 가로세로 비율 지정)

aspect-ratio는 CSS에서 요소의 가로세로 비율을 지정하는 속성으로, 한쪽 크기만 설정해도 나머지 크기가 자동 계산되어 일정한 비율을 유지할 수 있게 해줍니다.

 

aspect-ratio 속성은
요소의 가로세로 비율(너비 대비 높이 비율, 종횡비)을 설정합니다.

 

특히, 이미지(img)나 비디오 동영상(video), div 요소 등 요소 박스의 가로(너비) 세로(높이) 비율을 쉽게 유지하거나 조정, 설정할 수 있습니다.

 

형식 구문

selector {
    aspect-ratio: auto || <ratio>
    /*
        <ratio>:
         - 가로(숫자)/세로(숫자): 가로 대비 세로의 비율입니다.
         - 슬래시(/)가 없을 경우 가로/세로 비율의 값(숫자)입니다.
    */
}

 

값

• auto: 고유한 가로세로 비율(종횡비)이 있는 이미지나 비디오 등의 대체 요소는 해당 가로세로 비율을 사용합니다. 그 밖의 요소에서는 고유한 가로세로 비율이 없습니다.
• <ratio>: 가로(숫자)/세로(숫자) - 가로 대비 세로의 비율입니다. (슬래시(/) 앞뒤에 공백이 있든 없든 관계없이 같은 의미로 처리됩니다.). 슬래시(/)가 없을 경우 가로/세로 비율의 값(숫자)입니다. 백분율(%) 단위 값은 적용되지 않습니다.

구문

aspect-ratio: 1 / 1; /* '1/1'과 동일함. 슬래시(/) 앞뒤에 공백이 있든 없든 관계없이 같은 의미로 처리 */
aspect-ratio: 1;
aspect-ratio: 16/9;
aspect-ratio: 1.77;
aspect-ratio: auto;

/* 글로벌 값 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

 

예제

div {
    background-color: orange;
    width: 200px;
    /*
        height가 지정되지 않았을 경우
        height는 auto입니다.
    */
    aspect-ratio: 1; /* '1/1'과 동일 */
}

 

작동 안 됨 주의

반드시 width나 height 중 하나는 auto

 

div {
    background-color: orange;
    width: 200px;
    aspect-ratio: 1;
    height: 50px;
    /*
        height 값이 auto가 아닐 경우
        aspect-ratio는 작동하지 않습니다.
    */
}

 

참고문헌

codingeverybody.jp

CSS aspect-ratioプロパティ：要素の縦横比を自動的に計算 - codingEverybody

 

코딩에브리바디

CSS aspect-ratio 속성 – 요소의 가로세로 비율을 자동으로 계산 - 코딩에브리바디

 

codingCourses

CSS aspect-ratio Property – Sets an Element’s Width-to-Height Ratio - codingCourses