CSS / Reference / aspect-ratio

aspect-ratio는 요소의 가로와 세로 비율을 위한 선호 비율을 지정합니다. 한 축의 크기가 auto일 때 다른 축을 바탕으로 크기를 계산하는 데 쓰이며, 가로·세로를 모두 고정하면 그 값들이 비율보다 우선할 수 있습니다.

문법과 주요 값

.video { width: 100%; aspect-ratio: 16 / 9; }
.square { width: 240px; aspect-ratio: 1; }

값의 적용 범위와 문법은 MDN의 aspect-ratio 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 aspect-ratio-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>aspect-ratio 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 240px; height: auto; background: #bfe3ff; }
.target { aspect-ratio: 16 / 9; }
.reference { aspect-ratio: 1; }
</style>
</head>
<body>
<main id="demo">
<h1>aspect-ratio 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">16 / 9</p><div class="target"></div></div><div class="b"><p class="label">1</p><div class="reference"></div></div></section>
</main>
</body>
</html>

너비 240px인 첫 박스의 높이는 135px, 두 번째 정사각형은 240px입니다. 너비가 바뀌면 auto 높이도 선호 비율에 따라 바뀝니다.

선호 비율과 크기 제약

aspect-ratio는 모든 상황에서 크기를 강제하는 잠금 장치가 아닙니다. width와 height, min/max 크기, 콘텐츠 최소 크기와 flex·grid의 배치 제약이 결과에 영향을 줍니다. 양쪽 크기를 고정하면 비율 선언만으로 한쪽이 자동 수정되지 않습니다.

이미지 박스와 이미지 내용

img의 박스에 비율을 지정해도 사진을 어떻게 맞출지는 object-fit이 정합니다. cover는 자를 수 있고 contain은 빈 공간을 남길 수 있습니다. 이미지의 원래 width·height 정보를 HTML에 제공하는 것과 CSS 선호 비율은 구분되며, 콘텐츠 로딩 전 공간을 마련하려면 두 정보가 모순되지 않도록 합니다.

적용되지 않거나 예상과 다를 때

• 비율이 안 맞으면 height가 auto인지와 min-height 등의 제한을 확인합니다.
• 사진이 찌그러지면 박스 비율뿐 아니라 object-fit과 이미지 크기 설정을 확인합니다.

관련 설정을 함께 조정할 때는 비율 계산에 관여하는 box-sizing을 참고하세요.