Aspect Ratio
설치 확인고정 비율 영역
1. 목적과 출처
고정 비율 영역
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/aspect-ratio.tsx- Registry
@adcapsule/aspect-ratio
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| ratio | 모양 |
|---|---|
| 16/9 |  |
| 4/3 | |
| 1/1 | |
| 3/4 | |
3. 속성 바꿔 보기
ratio
4. 설치와 사용
- npm 패키지
- 없음
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- ratio는 숫자(가로/세로)
- 그림은 size-full object-cover로 채우기
- 모서리는 바깥 요소에 rounded-lg overflow-hidden
공통으로 유지할 토큰
- 토큰 없음(비율만 정함). 모서리·테두리는 감싸는 요소에서 radius.lg·border.default