aspect-ratio
속성의 이해
CSS로 이미지나 비디오 동영상, div 요소 등 요소 박스의 가로(width
) 세로(height
) 비율을 쉽게 유지하거나 조정, 설정할 수 있는 속성이 있습니다. aspect-ratio
속성은 요소의 원하는 가로 세로 비율을 설정합니다. 이 속성을 활용하면 반응형 웹에서 가로 세로 비율 고정이나 설정을 쉽게 할 수 있습니다. aspect-ratio
속성의 사용법에 대해 알아보겠습니다.
그리고, aspect-ratio
속성 사용 시 작동하지 않는 사례와 주의할 점도 살펴보겠습니다.
aspect-ratio
속성은
요소 박스의 가로 세로 비율( 가로 / 세로 )을 설정합니다.
![earth](/wp-content/uploads/earth.jpg)
형식 구문
selector {
aspect-ratio: auto || <ratio>;
/*
<ratio>:
가로(숫자)/세로(숫자): 가로 대비 세로의 비율입니다.
슬래시(/)가 없을 경우 가로/세로 비율의 값(숫자)입니다.
*/
}
형식 정의
초깃값 | auto |
---|---|
적용 요소 | 인라인 박스와 <ruby> 또는 테이블 박스를 제외한 모든 요소 |
상속 | 아니오 |
퍼센트(%) 값 | 적용 안 됨 |
값
auto |
이미지나 비디오 등의 대체 요소는 해당 가로 세로 비율을 사용합니다. 그 밖에는 가로 세로 비율이 없습니다. |
---|---|
ratio |
가로(숫자)/세로(숫자): 가로 대비 세로의 비율입니다.
슬래시( / )가 없을 경우 가로/세로 비율의 값(숫자)입니다.
퍼센트( % ) 값은 적용되지 않습니다. |
예제
aspect-ratio
속성에 대해 예제로 살펴보겠습니다.
기본 사용법
div {
background-color: orange;
width: 200px;
/*
height가 지정되지 않았을 경우
height는 auto입니다.
*/
aspect-ratio: 1; /* '1/1'과 동일 */
}
<div>요소 박스</div>
작동 안 됨 주의
aspect-ratio
속성이 작동하지 않는 경우가 있습니다.
height
값이auto
가 아닐 경우align-items: stretch;
를 적용 받는 요소일 경우- 퍼센트(
%
) 값을 사용할 경우
이러한 사례들을 살펴보겠습니다.
height
값이 auto
가 아닐 경우
height
값이 auto
가 아닐 경우에는 aspect-ratio
속성이 작동하지 않습니다.
div {
background-color: orange;
width: 200px;
aspect-ratio: 1;
height: 50px;
/*
height 값이 auto가 아닐 경우
aspect-ratio는 작동하지 않습니다.
*/
}
<div>요소 박스</div>
height
값이 auto
가 아닐 경우 aspect-ratio
는 작동하지 않습니다.
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>
align-items: stretch;
를 적용 받는 요소는 aspect-ratio
가 작동하지 않습니다.
퍼센트(%
) 값을 사용할 경우
aspect-ratio
속성에 퍼센트(%
) 값 사용을 사용하는 경우에는 작동하지 않습니다.
div {
background-color: orange;
width: 200px;
aspect-ratio: 100%; /* 퍼센트(%) 값은 사용 불가하여 작동하지 않습니다. */
}
<div>요소 박스</div>
%
) 값은 사용 불가하여 작동하지 않습니다.
<video>
태그에 사용 시 주의할 점
<video>
태그에서 재생되는 동영상 파일은 해당 파일에 대한 고유한 가로 세로 비율(종횡비)가 있습니다.
aspect-ratio
속성은 <img>
태그에서는 이미지 소스 에 적용되지만, <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 |