aspect-ratio · 가로세로 비율
요소의 선호 가로세로 비율을 지정합니다.
기본 문법
.item { aspect-ratio: 16 / 9; }작은 예제 css
.demo { display: flex; gap: 12px; }
.item {
width: 120px;
padding: 0;
aspect-ratio: 16 / 9;
display: grid;
place-items: center;
}화면에서 확인할 것
너비 120px 상자에 16:9 비율이 적용됩니다.
헷갈리기 쉬운 점
- 너비와 높이를 모두 확정하면 aspect-ratio가 의도한 크기에 영향을 주지 않을 수 있습니다.
- 이미지를 자르면서 상자를 채우려면 비율 지정과 별개로 object-fit을 검토하세요.