정의 및 사용 방법
aspect-ratio
속성은
요소의 가로세로 비율(너비 대비 높이 비율, 종횡비)을 설정합니다.
이 속성을 사용하면 한쪽 크기만 지정해도 나머지 크기가 자동으로 계산되어, 반응형 레이아웃에서도 일정한 비율을 유지하도록 손쉽게 구현할 수 있습니다.
기본 예제

형식 구문
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;
형식 정의
초깃값 | auto |
---|---|
적용 요소 | 인라인 박스와 <ruby> 또는 테이블 박스를 제외한 모든 요소 |
백분율(%) 단위 값 | 적용 안 됨 |
상속 | 아니오 |
애니메이션 | auto 를 제외한 계산된 값 유형 |
예제
aspect-ratio
속성에 대해 예제로 살펴보겠습니다.
기본 사용법
div {
background-color: orange;
width: 200px;
/*
height가 지정되지 않았을 경우
height는 auto입니다.
*/
aspect-ratio: 1; /* '1/1'과 동일 */
}
<div>요소 박스</div>
요소 박스
작동 안 됨 주의
aspect-ratio
속성이 작동하지 않는 경우가 있습니다.
이러한 사례들을 살펴보겠습니다.
div {
background-color: orange;
width: 200px;
aspect-ratio: 1;
height: 50px;
/*
height 값이 auto가 아닐 경우
aspect-ratio는 작동하지 않습니다.
*/
}
<div>요소 박스</div>
요소 박스
align-items: stretch
를 적용 받는 요소일 경우
align-items: stretch
를 적용 받는 요소에는 aspect-ratio
속성이 작동하지 않습니다.
.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가 작동하지 않습니다.
*/
}
<section class="flex-box">
<div class="box-1">요소 박스 - 1</div>
<div class="box-2">요소 박스 - 2</div>
</section>
요소 박스 - 1
요소 박스 - 2
백분율(%) 단위 값을 사용할 경우
aspect-ratio
속성에 백분율(%) 단위 값 사용을 사용하는 경우에는 작동하지 않습니다.
div {
background-color: orange;
width: 200px;
aspect-ratio: 100%; /* 백분율(%) 단위 값은 사용 불가하여 작동하지 않습니다. */
}
<div>요소 박스</div>
요소 박스
<video>
요소에 사용 시 주의할 점
<video>
요소에서 재생되는 동영상 파일은 해당 파일에 대한 고유한 가로세로 비율(종횡비)가 있습니다.
<video src="flower.mp4" autoplay muted playsinline loop></video>
video {
width: 250px;
border: 1px solid red;
aspect-ratio: 1/1;
}
aspect-ratio
속성은 재생되는 동영상 파일에 적용되는 것이 아니라 <video>
요소 박스에 적용된다는 것을 위 예제를 통해 알 수 있습니다. 이럴 경우 빈 공간이 생길 수 있습니다. 이는 스타일의 큰 문제가 될 수 있습니다. <video>
요소에 aspect-ratio
속성을 사용할 경우 발생할 수 있는 스타일의 문제에는 object-fit
속성의 값을 cover
로 지정해서 해결할 수 있습니다.
아래는 object-fit: cover;
를 지정해서 스타일의 문제를 해결한 예제입니다.
video {
width: 250px;
border: 1px solid red;
aspect-ratio: 1/1;
object-fit: cover; /* 빈 공간이 생기는 문제 해결 */
}
기억하세요!
<video>
요소에 aspect-ratio
속성을 사용할 경우 object-fit: cover
를 함께 사용하세요.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
aspect-ratio
|
88 | 88 | 89 | 15 |
명세서
명세서 사양 | |
---|---|
aspect-ratio
|
CSS Box Sizing Module Level 4 #aspect-ratio |