Aspect Ratio

원하는 비율(ratio) 안에 콘텐츠를 표시해 주는 컴포넌트예요.

출처: 문서

본문

콘텐츠를 지정한 가로세로 비율로 유지하고 싶을 때 사용해요. 어떤 커스텀 비율이든 받아들여서, 컨테이너 크기가 바뀌어도 비율이 깨지지 않게 해 줘요.

AspectRatio는 전체 페이지에 한 번만 렌더링하면 되는 단일 컴포넌트라 페이지 성능을 개선하는 데도 도움이 돼요.

컴포넌트를 임포트해요.

import { AspectRatio } from "radix-ui";

export default () => <AspectRatio.Root />;

특정 비율로 제한하고 싶은 콘텐츠를 담아요.

Prop	Type	Default
`asChild`	`boolean`	`false`
`ratio`	`number`	`1`