AspectRatio
安装
npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/aspect-ratio.jsonyarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/aspect-ratio.jsonpnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/aspect-ratio.jsonbunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/aspect-ratio.json参考
示例
import NextImage from "next/image"import { AspectRatio } from "@/registry/ssp/ui/aspect-ratio"export default function Example() {return ( <AspectRatio ratio={16 / 9} className='rounded-lg bg-muted'> <NextImage src='https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80' alt='Photo by Drew Beamer' fill className='h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale' /> </AspectRatio>)}