[CSS] aspect-ratio 속성으로 반응형 박스 비율 고정하는 법

반응형 웹페이지를 만들다 보면, 정해진 가로세로 비율을 유지한 채 박스나 이미지 크기를 자동 조절해야 하는 경우가 많습니다.

과거에는 padding-top 트릭이나 position: absolute를 이용해 우회적으로 해결했지만, CSS의 aspect-ratio 속성을 사용하면 이 과정을 훨씬 더 간단하게 만들 수 있습니다.

 

기본 사용법

<div class="box"></div>

.box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #3498db;
}

 

 

이렇게 작성하면, .box는 항상 가로 16: 세로 9의 비율을 유지합니다. width가 늘어나면 height도 자동 조정됩니다. 모바일에서도 완벽하게 작동하게 됩니다.

 

다양한 예제

1. 정사각형 만들기

.square {
  width: 100px;
  aspect-ratio: 1 / 1;
  background: gray;
}

2. 이미지에 적용하기

<img src="thumbnail.jpg" alt="썸네일" style="aspect-ratio: 3 / 4; width: 100%;">

가수 츄 사진으로 예제를 만들어봤다

이미지가 3:4 비율로 자동 조절되며, 미디어 쿼리 없이도 반응형 적용이 됩니다.

 

3. 카드 레이아웃에 활용

<div class="card"></div>
<div class="card"></div>

.card {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3 / 4;
  background: #f1f1f1;
  border-radius: 12px;
  margin-bottom: 10px;
}

grid나 flex 안에서 카드 형태의 아이템을 동일한 비율로 유지할 때 매우 유용합니다.

---

주의할 점

• 이미지 비율 유지가 안 될 경우: object-fit: cover 혹은 object-fit: contain과 함께 사용하면 좋습니다.
• 일부 구형 브라우저(IE 등) 는 aspect-ratio를 지원하지 않으므로 크로스브라우징이 필요한 경우 padding-top 백업 코드가 필요합니다.

YouTube 플레이어 스타일

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/abc123" frameborder="0" allowfullscreen></iframe>
</div>

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

 

이 코드는 유튜브 임베드 플레이어를 기본 16:9 비율로 유지하면서도 반응형 레이아웃에 완벽하게 녹아들게 합니다.

---

• aspect-ratio는 반응형 디자인에서 비율 유지를 매우 쉽게 도와주는 속성입니다.
• 박스, 이미지, iframe, 카드 레이아웃 등 다양한 UI 구성에 활용할 수 있습니다.
• 오래된 CSS 테크닉에 의존하지 않고도, 가독성과 유지보수성 높은 코드를 작성할 수 있게 해줍니다.