Aspect Ratio

Displays content within a desired ratio.

Installation

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.

pnpm dlx shadcn@latest add aspect-ratio

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

<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>

A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.

A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.

The AspectRatio component displays content within a desired ratio.

Prop	Type	Default	Required
`ratio`	`number`	-	Yes
`className`	`string`	-	No

import Image from "next/image"
import { AspectRatio } from "@/components/ui/aspect-ratio"

import Image from "next/image"
import { AspectRatio } from "@/components/ui/aspect-ratio"

import Image from "next/image"
import { AspectRatio } from "@/components/ui/aspect-ratio"