AAtomic CSS

aspect-ratio

요소의 가로세로 비율을 설정합니다. padding-top 핵을 대체하는 현대적인 방법이며, 비디오 임베드, 이미지 컨테이너, 카드 레이아웃 등에 활용합니다.

클래스 목록

ar{W}-{H} — 비율 지정 (예: ar16-9)

ar{N} — 단일 값 (예: ar1 = 정사각형)

클래스CSS설명
ar16-9aspect-ratio: 16 / 9와이드스크린. 동영상, 히어로 배너
ar4-3aspect-ratio: 4 / 3전통 사진. 갤러리, 상품 이미지
ar1aspect-ratio: 1정사각형. 아바타, 아이콘
ar21-9aspect-ratio: 21 / 9시네마 와이드. 배너, 파노라마

시각적 비교

동일한 너비에서 각 비율이 어떤 형태를 만드는지 비교합니다.

16:9 와이드스크린 — ar16-9

16 : 9

YouTube, Vimeo 등 동영상의 표준 비율

4:3 전통 사진 — ar4-3

4 : 3

디지털 카메라 기본 비율, 썸네일에 적합

1:1 정사각형 — ar1

1 : 1

아바타, 프로필 사진, Instagram 스타일

21:9 시네마 — ar21-9

21 : 9

영화 트레일러, 울트라와이드 배너

언제 뭘 쓸까?

상황추천이유
YouTube/Vimeo 임베드ar16-9동영상 표준 비율
사진 갤러리ar4-3카메라 기본 비율, 자연스러운 사진 표시
아바타, 프로필 사진ar1정사각형 + br50p로 원형
영화 트레일러 배너ar21-9시네마 와이드스크린 비율
카드 썸네일 통일ar16-9 / ar4-3다양한 이미지 비율을 균일하게 맞춤
히어로 섹션ar16-9넓고 낮은 비율로 시각적 임팩트

클래스별 상세

ar16-9aspect-ratio: 16 / 9

가장 보편적인 와이드스크린 비율입니다. YouTube, Vimeo 등 대부분의 동영상 플레이어와 히어로 배너에 사용합니다.

<!-- 반응형 비디오 컨테이너 -->
<div class="pr ar16-9 oh br8px">
  <iframe src="https://www.youtube.com/embed/..." class="pa t0 l0 w100p h100p bn"></iframe>
</div>

<!-- 히어로 이미지 -->
<img src="hero.jpg" alt="" class="ar16-9 w100p ofc br8px" />

자주 쓰는 조합

pr ar16-9 oh반응형 비디오 컨테이너 (iframe용)
ar16-9 w100p ofc16:9 비율 고정 이미지
ar16-9 w100p ofc br8px둥근 모서리 히어로 이미지

ar4-3aspect-ratio: 4 / 3

전통적인 사진 비율입니다. 디지털 카메라의 기본 비율이며, 상품 이미지, 갤러리, 썸네일에 적합합니다.

<!-- 상품 이미지 갤러리 -->
<div class="dg gtcr3-1fr gap2rem sm-gtc1fr">
  <img src="product1.jpg" alt="" class="ar4-3 w100p ofc br8px" />
  <img src="product2.jpg" alt="" class="ar4-3 w100p ofc br8px" />
  <img src="product3.jpg" alt="" class="ar4-3 w100p ofc br8px" />
</div>

<!-- 사진 카드 -->
<div class="oh br8px bg18181B">
  <img src="photo.jpg" alt="" class="ar4-3 w100p ofc" />
  <div class="p16px">카드 내용</div>
</div>

ar1aspect-ratio: 1

정사각형 비율입니다. 아바타, 아이콘 컨테이너, Instagram 스타일 피드에 사용합니다. br50p와 조합하면 원형이 됩니다.

<!-- 정사각형 아바타 -->
<img src="avatar.jpg" alt="" class="ar1 w6rem ofc br50p" />

<!-- 아이콘 그리드 -->
<div class="dg gtcr4-1fr gap16px sm-gtcr2-1fr">
  <div class="ar1 bg18181B br8px df jcc aic">
    <span class="fs2-4rem">&#9733;</span>
  </div>
  <div class="ar1 bg18181B br8px df jcc aic">
    <span class="fs2-4rem">&#9829;</span>
  </div>
  <div class="ar1 bg18181B br8px df jcc aic">
    <span class="fs2-4rem">&#9834;</span>
  </div>
  <div class="ar1 bg18181B br8px df jcc aic">
    <span class="fs2-4rem">&#9728;</span>
  </div>
</div>

ar21-9aspect-ratio: 21 / 9

시네마 와이드스크린 비율입니다. 영화 트레일러, 울트라와이드 배너, 파노라마 이미지에 활용합니다.

<!-- 시네마 배너 -->
<div class="ar21-9 w100p oh br8px">
  <img src="panorama.jpg" alt="" class="w100p h100p ofc" />
</div>

<!-- 울트라와이드 히어로 -->
<div class="ar21-9 w100p bg18181B br8px df jcc aic">
  <h2>울트라와이드 배너</h2>
</div>

비디오 임베드 패턴

pr ar16-9 oh 컨테이너 안에 pa t0 l0 w100p h100p iframe을 배치하는 반응형 비디오 패턴입니다.

<!-- 반응형 YouTube 임베드 (16:9) -->
<div class="pr ar16-9 oh br8px">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    class="pa t0 l0 w100p h100p bn"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
    allowfullscreen
  ></iframe>
</div>

<!-- 반응형 Vimeo 임베드 -->
<div class="pr ar16-9 oh br8px bg000000">
  <iframe
    src="https://player.vimeo.com/video/123456"
    class="pa t0 l0 w100p h100p bn"
    allowfullscreen
  ></iframe>
</div>

라이브 데모

iframe 영역 (16:9)

팁 & 주의사항

padding-top 핵 대체

aspect-ratio는 과거 padding-top: 56.25%로 16:9를 구현하던 방식을 완전히 대체합니다. 더 직관적이고 유지보수가 쉽습니다.

object-fit과 조합

이미지에 ar16-9과 ofc를 함께 사용하면 비율을 유지하면서 컨테이너를 채우는 이미지를 만들 수 있습니다. 예: ar16-9 w100p ofc

width 또는 height 중 하나만 지정

aspect-ratio는 한 축의 크기만 주면 나머지를 자동 계산합니다. width와 height를 모두 고정하면 비율이 무시될 수 있으므로 주의하세요.

object-fitwidthheightoverflow