CSS aspect-ratio 속성

정의와 사용법

aspect-ratio 속성은 요소의 너비와 높이 비율을 정의할 수 있도록 합니다.

이 속성이 설정되면 aspect-ratio 와 width 속성, 높이는 정의된 비율에 따라 조정됩니다.

속성을 더 잘 이해하기 위해 aspect-ratio 속성에 대해 더 자세히 알아보려면, 데모를 확인하세요.

훌륭한 조언:반응형 레이아웃에서 사용 aspect-ratio 속성, 요소의 크기가 자주 변경될 때, 너비와 높이 비율을 유지하고 싶을 때 사용됩니다.

예제

예제 1

요소에 비율을 추가합니다:

div {
  aspect-ratio: 3 / 2;
}

직접 시도해 보세요

예제 2

div 요소의 크기가 변경되어야 할 때aspect-ratio 이 속성은 div 요소의 너비와 높이 비율을 제어하는 데 매우 적합합니다. 예를 들어, 이미지 라이브러리에서 div 요소의 크기는 모든 장치에 맞게 조정되어야 하지만, 이미지의 너비와 높이 비율을 유지하고 싶을 때:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>alley</div>
  <div>flowers by the street</div>
  <div>mountains</div>
  <div>Cinque Terre</div>
</div>

직접 시도해 보세요

CSS 문법

aspect-ratio: number/number|initial|inherit;

속성 값

기술 세부 사항

브라우저 지원

표에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

관련 페이지

教程:CSS 그리드 레이아웃 모듈

참조:CSS 오브젝트-핏 속성

참조:CSS 오브젝트-포지션 속성