import { AspectRatio } from "@/components/ui/aspect-ratio"
export function AspectRatioDemo() {
return (
<AspectRatio ratio={16 / 9} className="w-full max-w-sm rounded-lg bg-muted">
<img
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
)
}Changed from the official source: Next.js Image (next/image) rendered as a plain img with the same src, alt, size and classes; fill as absolute inset-0 size-full.
Installation
npx shadcn@latest add @fulldev/aspect-ratioUsage
import { AspectRatio } from "@/components/ui/aspect-ratio"<AspectRatio ratio={16 / 9}>
<Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>Square
A square aspect ratio component using the ratio={1 / 1} prop.
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function AspectRatioSquare() {
return (
<AspectRatio
ratio={1 / 1}
className="w-full max-w-[12rem] rounded-lg bg-muted"
>
<img
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
)
}Changed from the official source: Next.js Image (next/image) rendered as a plain img with the same src, alt, size and classes; fill as absolute inset-0 size-full.
Portrait
A portrait aspect ratio component using the ratio={9 / 16} prop.
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function AspectRatioPortrait() {
return (
<AspectRatio
ratio={9 / 16}
className="w-full max-w-[10rem] rounded-lg bg-muted"
>
<img
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
)
}Changed from the official source: Next.js Image (next/image) rendered as a plain img with the same src, alt, size and classes; fill as absolute inset-0 size-full.
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
"use client"
import * as React from "react"
import { AspectRatio } from "@/components/ui/aspect-ratio"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
const translations: Translations = {
en: {
dir: "ltr",
values: {
caption: "Beautiful landscape",
},
},
ar: {
dir: "rtl",
values: {
caption: "منظر طبيعي جميل",
},
},
he: {
dir: "rtl",
values: {
caption: "נוף יפה",
},
},
}
export function AspectRatioRtl() {
const { dir, t } = useTranslation(translations, "ar")
return (
<figure className="w-full max-w-sm" dir={dir}>
<AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
<img
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
<figcaption className="mt-2 text-center text-sm text-muted-foreground">
{t.caption}
</figcaption>
</figure>
)
}Changed from the official source: Next.js Image (next/image) rendered as a plain img with the same src, alt, size and classes; fill as absolute inset-0 size-full.
API Reference
Source: react/src/components/ui/aspect-ratio.tsx
AspectRatio
The AspectRatio component displays content within a desired ratio.
| Prop | Type | Default | Required |
|---|---|---|---|
ratio | number | - | Yes |
className | string | - | No |