Aspect Ratio

Wrapper that maintains aspect ratio for content.

1:1

Installation


pnpm dlx shadcn@latest add @shark/aspect-ratio


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.

16:9 → 1:1

You can use breakpoint utilities to change the aspect ratio at different screen sizes.


  md:[--ratio:16/9] lg:[--ratio:16/9]

Root component.

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

Attribute	Description
`--ratio`	`1`

On This Page