---
import { AspectRatio } from "@/components/ui/aspect-ratio"
---
<AspectRatio ratio={16 / 9} class="bg-muted w-full max-w-sm rounded-lg">
<img
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
class="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>Installation
npx shadcn@latest add @fulldev/aspect-ratioUsage
import { AspectRatio } from "@/components/ui/aspect-ratio"<AspectRatio ratio={16 / 9}>
<img src="/image.jpg" alt="Landscape" class="size-full object-cover" />
</AspectRatio>The child controls its own crop. Use object-cover to fill the area.
Square
A square aspect ratio using ratio={1 / 1}.
---
import { AspectRatio } from "@/components/ui/aspect-ratio"
---
<AspectRatio ratio={1 / 1} class="bg-muted w-full max-w-[12rem] rounded-lg">
<img
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
class="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>Portrait
A portrait aspect ratio using ratio={9 / 16}.
---
import { AspectRatio } from "@/components/ui/aspect-ratio"
---
<AspectRatio ratio={9 / 16} class="bg-muted w-full max-w-[10rem] rounded-lg">
<img
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
class="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>RTL
---
import { AspectRatio } from "@/components/ui/aspect-ratio"
const translations = {
en: {
dir: "ltr",
values: {
caption: "Beautiful landscape",
},
},
ar: {
dir: "rtl",
values: {
caption: "منظر طبيعي جميل",
},
},
he: {
dir: "rtl",
values: {
caption: "נוף יפה",
},
},
} as const
const { dir, values: t } = translations.ar
---
<figure class="w-full max-w-sm" dir={dir}>
<AspectRatio ratio={16 / 9} class="bg-muted rounded-lg">
<img
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
class="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
<figcaption class="text-muted-foreground mt-2 text-center text-sm">
{t.caption}
</figcaption>
</figure>API Reference
Source: src/components/ui/aspect-ratio
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | required | Width divided by height, such as 16 / 9. |
class, style, and other div attributes are forwarded. String and object
style values are merged with the internal --ratio variable.