aspect-ratio 속성의 이해

aspect-ratio 속성은
요소 박스의 가로 세로 비율( 가로 / 세로 )을 설정합니다.

  • aspect-ratio 속성은 이미지(<img>)나 비디오 동영상(<video>), <div> 요소 등 요소 박스의 가로(너비) 세로(높이) 비율을 쉽게 유지하거나 조정, 설정할 수 있습니다.
  • 이 속성을 활용하면 반응형 웹에서 가로 세로 비율 고정이나 설정을 쉽게 할 수 있습니다.
CSS 데모: aspect-ratio 데모 버튼을 클릭해 보세요!

형식 구문

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

구문

CSS 
aspect-ratio: 1;
aspect-ratio: 16/9;
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 속성 값
auto 이미지나 비디오 등의 대체 요소는 해당 가로 세로 비율을 사용합니다.
그 밖의 요소에서는 가로 세로 비율이 없습니다.
<ratio> 가로(숫자)/세로(숫자): 가로 대비 세로의 비율입니다.
슬래시(/)가 없을 경우 가로/세로 비율의 값(숫자)입니다.
백분율(%) 단위 값은 적용되지 않습니다.

예제

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

기본 사용법

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

작동 안 됨 주의

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

  • height 값이 auto가 아닐 경우
  • align-items: stretch를 적용 받는 요소일 경우
  • 백분율(%) 단위 값을 사용할 경우

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

height 값이 auto가 아닐 경우

height 값이 auto가 아닐 경우에는 aspect-ratio 속성이 작동하지 않습니다.

CSS 
div {
    background-color: orange;
    width: 200px;
    aspect-ratio: 1;
    height: 50px;
    /*
        height 값이 auto가 아닐 경우
        aspect-ratio는 작동하지 않습니다.
    */
}
HTML 
<div>요소 박스</div>
실제 적용 모습 height 값이 auto가 아닐 경우 aspect-ratio는 작동하지 않습니다.
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>
실제 적용 모습 align-items: stretch를 적용 받는 요소는 aspect-ratio가 작동하지 않습니다.
백분율(%) 단위 값을 사용할 경우

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;
}
실제 적용 모습
HTML <video> 태그 자동 재생 완벽가이드

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

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

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

참고문헌

같이 보기