Aspect Ratio
Displays content within a desired ratio.
import { AspectRatio } from "~/components/ui/aspect-ratio";
export default function AspectRatioDemo() { return ( <AspectRatio ratio={16 / 9} class="w-full max-w-sm rounded-lg bg-muted"> <img src="https://avatar.vercel.sh/shadcn1" alt="Abstract avatar" class="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20" /> </AspectRatio> );}Installation
Usage
import { AspectRatio } from "~/components/ui/aspect-ratio";<AspectRatio ratio={16 / 9}> <img src="..." alt="Example" class="rounded-md object-cover" /></AspectRatio>Square
A square aspect ratio using ratio={1 / 1} is useful for displaying square images.
import { AspectRatio } from "~/components/ui/aspect-ratio";
export default function AspectRatioSquare() { return ( <AspectRatio ratio={1 / 1} class="w-full max-w-[12rem] rounded-lg bg-muted"> <img src="https://avatar.vercel.sh/shadcn1" alt="Abstract avatar" class="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20" /> </AspectRatio> );}Portrait
A portrait aspect ratio using ratio={9 / 16} is useful for displaying portrait images.
import { AspectRatio } from "~/components/ui/aspect-ratio";
export default function AspectRatioPortrait() { return ( <AspectRatio ratio={9 / 16} class="w-full max-w-[10rem] rounded-lg bg-muted"> <img src="https://avatar.vercel.sh/shadcn1" alt="Abstract avatar" class="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20" /> </AspectRatio> );}API Reference
AspectRatio
Displays content within a desired ratio.