AspectRatio

AspectRatio 컴포넌트 (actibooky DS).

npx shadcn@latest add @actibooky/aspect-ratio

미리보기 · Controls

불러오는 중…

코드

aspect-ratio.tsx

import { cn } from "@/lib/utils"

function AspectRatio({
  ratio,
  className,
  ...props
}: React.ComponentProps<"div"> & { ratio: number }) {
  return (
    <div
      data-slot="aspect-ratio"
      style={
        {
          "--ratio": ratio,
        } as React.CSSProperties
      }
      className={cn("relative aspect-(--ratio)", className)}
      {...props}
    />
  )
}

export { AspectRatio }