정의 및 사용 방법

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

이 속성을 사용하면 한쪽 크기만 지정해도 나머지 크기가 자동으로 계산되어, 반응형 레이아웃에서도 일정한 비율을 유지하도록 손쉽게 구현할 수 있습니다.

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

기본 예제

CSS 라이브 데모: aspect-ratio 데모 버튼을 클릭해 보세요!

형식 구문

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

값

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

구문

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

형식 정의

aspect-ratio 속성의 형식 정의
초깃값 auto
적용 요소 인라인 박스와 <ruby> 또는 테이블 박스를 제외한 모든 요소
백분율(%) 단위 값 적용 안 됨
상속 아니오
애니메이션 auto를 제외한 계산된 값 유형

예제

aspect-ratio 속성에 대해 예제로 살펴보겠습니다.

기본 사용법

CSS 
div {
    background-color: orange;
    width: 200px;
    /*
        height가 지정되지 않았을 경우
        height는 auto입니다.
    */
    aspect-ratio: 1; /* '1/1'과 동일 */
}
HTML 
<div>요소 박스</div>
실제 적용 모습

작동 안 됨 주의

aspect-ratio 속성이 작동하지 않는 경우가 있습니다.

  • 반드시 width나 height 중 하나는 auto여야 aspect-ratio가 제대로 작동합니다.
  • align-items: stretch를 적용 받는 요소일 경우
  • 백분율(%) 단위 값을 사용할 경우

이러한 사례들을 살펴보겠습니다.

반드시 width나 height 중 하나는 auto

aspect-ratio는 크기가 "자동"으로 계산될 여지가 있어야 비율을 참고해서 동작합니다.
width와 height가 모두 명시적으로 지정되어 있으면 이미 크기가 고정돼 있어 비율 적용 불가합니다.

CSS 
div {
    background-color: orange;
    width: 200px;
    aspect-ratio: 1;
    height: 50px;
    /*
        height 값이 auto가 아닐 경우
        aspect-ratio는 작동하지 않습니다.
    */
}
HTML 
<div>요소 박스</div>
실제 적용 모습
align-items: stretch를 적용 받는 요소일 경우

align-items: stretch를 적용 받는 요소에는 aspect-ratio 속성이 작동하지 않습니다.

CSS 
.flex-box {
    display: flex;
    align-items: stretch; /* 주목해 주세요! */
}
.box-1,
.box-2 {
    width: 100px;
}
.box-1 {
    height: 200px;
    background-color: orange;
    margin-right: 15px;
}
.box-2 {
    background-color: red;
    height: auto;
    aspect-ratio: 1/1;
    /*
        align-items: stretch를 적용 받는 요소는 
        aspect-ratio가 작동하지 않습니다.
    */
}
HTML 
<section class="flex-box">
    <div class="box-1">요소 박스 - 1</div>
    <div class="box-2">요소 박스 - 2</div>
</section>
실제 적용 모습
백분율(%) 단위 값을 사용할 경우

aspect-ratio 속성에 백분율(%) 단위 값 사용을 사용하는 경우에는 작동하지 않습니다.

CSS 
div {
    background-color: orange;
    width: 200px;
    aspect-ratio: 100%; /* 백분율(%) 단위 값은 사용 불가하여 작동하지 않습니다. */
}
HTML 
<div>요소 박스</div>
실제 적용 모습

<video> 요소에서 재생되는 동영상 파일은 해당 파일에 대한 고유한 가로세로 비율(종횡비)가 있습니다.

aspect-ratio 속성은 <img> 요소에서는 이미지 소스 에 적용되지만, <video> 요소에서는 재생되는 동영상 소스에 적용되는 것이 아니라 <video> 요소 박스에 적용됩니다. 아래의 예제를 보겠습니다.

HTML 
<video src="flower.mp4" autoplay muted playsinline loop></video>
CSS 
video {
    width: 250px;
    border: 1px solid red;
    aspect-ratio: 1/1;
}
실제 적용 모습

aspect-ratio 속성은 재생되는 동영상 파일에 적용되는 것이 아니라 <video> 요소 박스에 적용된다는 것을 위 예제를 통해 알 수 있습니다. 이럴 경우 빈 공간이 생길 수 있습니다. 이는 스타일의 큰 문제가 될 수 있습니다. <video> 요소에 aspect-ratio 속성을 사용할 경우 발생할 수 있는 스타일의 문제에는 object-fit 속성의 값을 cover로 지정해서 해결할 수 있습니다.

아래는 object-fit: cover;를 지정해서 스타일의 문제를 해결한 예제입니다.

CSS 
video {
    width: 250px;
    border: 1px solid red;
    aspect-ratio: 1/1;
    object-fit: cover; /* 빈 공간이 생기는 문제 해결 */
}
실제 적용 모습: object-fit: cover 적용

기억하세요!
<video> 요소에 aspect-ratio 속성을 사용할 경우 object-fit: cover를 함께 사용하세요.

브라우저 호환성

aspect-ratio 속성에 대한 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
aspect-ratio 88 88 89 15

명세서

aspect-ratio 속성에 대한 명세서 사양
명세서 사양
aspect-ratio CSS Box Sizing Module Level 4
#aspect-ratio

참고문헌

같이 보기