aspect-ratio 속성의 이해

CSS로 이미지나 비디오 동영상, div 요소 등 요소 박스의 가로(width) 세로(height) 비율을 쉽게 유지하거나 조정, 설정할 수 있는 속성이 있습니다. aspect-ratio 속성은 요소의 원하는 가로 세로 비율을 설정합니다. 이 속성을 활용하면 반응형 웹에서 가로 세로 비율 고정이나 설정을 쉽게 할 수 있습니다. aspect-ratio 속성의 사용법에 대해 알아보겠습니다.

그리고, aspect-ratio 속성 사용 시 작동하지 않는 사례와 주의할 점도 살펴보겠습니다.

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

CSS 데모: aspect-ratio 데모 버튼을 클릭해 보세요!
CSS 
selector {
    aspect-ratio: auto || <ratio>;
    /*
        <ratio>:
         가로(숫자)/세로(숫자): 가로 대비 세로의 비율입니다.
         슬래시(/)가 없을 경우 가로/세로 비율의 값(숫자)입니다.
    */
}

정의와 구문

aspect-ratio 속성의 정의
초깃값 auto
적용 요소 인라인 박스와 <ruby> 또는 테이블 박스를 제외한 모든 요소
상속 아니오
퍼센트(%) 값 적용 안 됨

값

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로 지정해서 해결할 수 있습니다.

CSS object-fit 속성 사용법

아래는 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

참고문헌

같이 보기