aspect-ratio 속성

aspect-ratio 속성은 플렉스 박스의 교차 축을 따라, 그리드의 수평 축을 따라 요소의 정렬을 지정합니다. 부모 요소에 적용됩니다.

문법

선택자 {
	aspect-ratio: auto 또는 비율;
}

값	설명
`auto`	요소에 선호하는 가로 세로 비율이 없으며 브라우저가 요소의 너비와 높이를 기반으로 자동으로 설정합니다.
`비율`	비율은 `16/9`와 같이 기록됩니다. 여기서 첫 번째 숫자는 너비이고 두 번째 숫자는 높이입니다. 값이 지정되지 않으면 `1`과 동일한 것으로 간주됩니다. 또한 일부 비율은 하나의 숫자로 기록할 수 있습니다. 예를 들어, `2/1`는 `0.5`로 기록할 수 있으며, 이는 동일한 결과를 제공합니다.
`auto && 비율`	비율이 키워드 `auto`와 함께 사용되는 경우 (예: `auto` `1/2`), 지정된 비율이 선택되지만, 자체 비율이 있는 대체 요소(예: 이미지 및 비디오)의 경우에는 해당 비율만 사용됩니다.

버튼의 가로 세로 비율을 자동으로 설정해 봅시다:

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: auto;
	background-color: #9DDFA4;
	padding: 1em;
}

이제 버튼의 가로 세로 비율을 1/2로 설정해 봅시다:

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: 1/2;
	background-color: #9DDFA4;
	padding: 1em;
}