종횡비
종횡비 (Aspect Ratio)
콘텐츠를 원하는 비율(ratio) 안에 표시해 주는 컴포넌트예요. Aspect Ratio 프리미티브의 props를 상속받아요.
출처: 문서
본문
콘텐츠를 원하는 비율 안에 표시해 줘요.
<AspectRatio ratio={16 / 8}>
<img
src="https://images.unsplash.com/photo-1479030160180-b1860951d696?&auto=format&fit=crop&w=1200&q=80"
alt="A house in a forest"
style={{
objectFit: "cover",
width: "100%",
height: "100%",
borderRadius: "var(--radius-2)",
}}
/>
</AspectRatio>
API Reference
이 컴포넌트는 Aspect Ratio 프리미티브의 props를 상속받아요.
더 알아보기 (Learn more)
- Aspect Ratio 프리미티브 — 기본 동작 살펴보기
- radius 토큰 —
--radius-*값 살펴보기