AspectRatio
콘텐츠를 원하는 가로세로 비율로 유지하는 컨테이너
개요
AspectRatio 컴포넌트는 이미지, 비디오, 지도 등의 콘텐츠를 지정된 비율로 일관되게 표시하는 컨테이너입니다. CSS aspect-ratio 속성을 기반으로 ratio prop을 받아 비율을 유지합니다.
주요 특징
- ✅ 비율 유지:
ratioprop으로 가로세로 비율 고정 - ✅ 반응형: 부모 너비에 맞춰 높이가 자동 계산
- ✅ 다양한 콘텐츠: 이미지, 비디오, iframe 등 모든 콘텐츠 지원
- ✅ 가벼운 구현: 단일 div 기반의 간결한 구조
사용 예시
기본 사용법 (16:9)
ratio에 16 / 9를 전달하여 와이드 비율을 유지합니다.
Preview
정사각형 (1:1)
프로필 이미지나 썸네일에 적합한 정사각형 비율입니다.
Preview
다양한 비율 비교
자주 사용하는 비율들의 예시입니다.
Preview
1:1
4:3
16:9
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | (필수) | 가로 / 세로 비율 (예: 16 / 9) |
className | string | - | 추가 CSS 클래스 |
div 요소의 모든 HTML 속성을 지원합니다.
기본 사용법
import { AspectRatio } from "@vortex/ui-foundation"
<AspectRatio ratio={16 / 9}>
<img src="/image.jpg" alt="" className="size-full object-cover" />
</AspectRatio>접근성
권장 사항
- ✅ 내부 이미지에는 의미 있는
alt텍스트 제공 - ✅ 콘텐츠가 잘리지 않도록
overflow-hidden과object-cover조합 사용 - ✅ 장식용 이미지는
alt=""로 스크린 리더에서 제외
참고
- AspectRatio 자체는 레이아웃 전용 컨테이너로 별도의 role이나 ARIA 속성을 가지지 않습니다
- 접근성은 내부 콘텐츠(이미지, 비디오 등)의 속성으로 보장합니다
관련 컴포넌트
Last updated on