Aspect Ratio

Wrapper that maintains aspect ratio for content.

1:1

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/aspect-ratio.json


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


<AspectRatio>
  <img
    src="/image.jpg"
    alt="Description"
    className="object-cover size-full"
  />
</AspectRatio>

1:1

9:16

16:9

Use [--ratio:*] with breakpoints to change the ratio at different screen sizes.

4:3 → 16:9 → 1:1

Main wrapper that preserves aspect ratio for its children using CSS.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

Attribute	Description
`--ratio`	`1`

On This Page