Aspect Ratio
Displays content, such as an image or video, within a desired width-to-height ratio.
Last updated August 8, 2026
CreditsUnchangedPublished
Copied from shadcn/ui.
Overview
16 / 9
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function AspectRatioDemoExample() {
return (
<div className="w-full max-w-sm">
<AspectRatio
ratio={16 / 9}
className="flex items-center justify-center rounded-lg bg-muted"
>
<span className="text-sm text-muted-foreground">16 / 9</span>
</AspectRatio>
</div>
)
}Installation
$ npx shadcn@latest add https://ui.persian-labs.ir/r/aspect-ratio.jsonUsage
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function Example() {
return (
<div className="w-64">
<AspectRatio ratio={16 / 9}>
<img
src="/image.jpg"
alt="Photo"
className="size-full rounded-lg object-cover"
/>
</AspectRatio>
</div>
)
}Square
1 / 1
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function AspectRatioSquareExample() {
return (
<div className="w-40">
<AspectRatio
ratio={1}
className="flex items-center justify-center rounded-lg bg-muted"
>
<span className="text-sm text-muted-foreground">1 / 1</span>
</AspectRatio>
</div>
)
}RTL
Aspect Ratio has no directional CSS, so it needs no RTL-specific handling — content placed inside it (like this caption) still respects the surrounding text direction.
تصویر با نسبت ۱۶ به ۹
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function AspectRatioRtlExample() {
return (
<div className="w-full max-w-sm">
<AspectRatio
ratio={16 / 9}
className="flex items-end rounded-lg bg-muted p-3"
>
<span className="text-sm text-muted-foreground">
تصویر با نسبت ۱۶ به ۹
</span>
</AspectRatio>
</div>
)
}