Aspect Ratio

Displays content within a desired ratio.

16 / 9

Installation

Copy and paste the following code into your project:


// components/ui/aspect-ratio.tsx
"use client"
 
import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
 
function AspectRatio({
  ...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}
 
export { AspectRatio }

Usage


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


<AspectRatio ratio={16 / 9}>
  <img src="..." alt="..." className="h-full w-full object-cover rounded-lg" />
</AspectRatio>

Examples

Image


<AspectRatio ratio={16 / 9}>
  <img src="..." alt="..." className="h-full w-full rounded-lg object-cover" />
</AspectRatio>

Square

1 / 1


<AspectRatio ratio={1}>
  <img src="..." alt="..." className="h-full w-full rounded-lg object-cover" />
</AspectRatio>

Portrait

3 / 4


<AspectRatio ratio={3 / 4}>
  <img src="..." alt="..." className="h-full w-full rounded-lg object-cover" />
</AspectRatio>

API Reference

AspectRatio

Prop	Type	Default	Description
`ratio`	`number`	`1`	The desired ratio (e.g. `16/9`, `4/3`, `1`).