Aspect Ratio

원하는 비율 안에서 콘텐츠를 표시합니다.

examples/krds/aspect-ratio-demo.tsx

import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/aspect-ratio.json

import { AspectRatio } from "@/components/ui/aspect-ratio"

<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>

A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.

examples/krds/aspect-ratio-square.tsx

import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.

examples/krds/aspect-ratio-portrait.tsx

import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

منظر طبيعي جميل

examples/krds/aspect-ratio-rtl.tsx

"use client"

import * as React from "react"

The AspectRatio component displays content within a desired ratio.

속성	타입	기본값	필수
`ratio`	`number`	-	Yes
`className`	`string`	-	No

For more information, see the Radix UI documentation.