AspectRatio

安装

npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/aspect-ratio.json
yarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/aspect-ratio.json
pnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/aspect-ratio.json
bunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/aspect-ratio.json

参考

示例

Photo by Drew Beamer
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>)}