Aspect Ratio

Maintain consistent width-to-height ratios for images, videos, and embedded content.

Preview

16 / 9

Installation

npx drivn add aspect-ratio

Usage

1 import { AspectRatio } from "@/components/ui/aspect-ratio"
2 
3 export default function Page() {
4   return (
5     <AspectRatio ratio="16/9">
6       <img
7         src="/hero.jpg"
8         alt="Hero"
9         className="w-full h-full object-cover"
10       />
11     </AspectRatio>
12   )
13 }

Presets

16/9

4/3

1/1

With Image

Custom Ratio

2.35 (Cinemascope)

API Reference

Prop	Type	Default	Description
`ratio`	"16/9" \| "4/3" \| "1/1" \| number	"16/9"	Aspect ratio as a string preset or custom number
`className`	string	—	Additional CSS classes to apply
`children`	React.ReactNode	—	Content to render inside the container

1	import { AspectRatio } from "@/components/ui/aspect-ratio"
2
3	export default function Page() {
4	return (
5	<AspectRatio ratio="16/9">
6	<img
7	src="/hero.jpg"
8	alt="Hero"
9	className="w-full h-full object-cover"
10	/>
11	</AspectRatio>
12	)
13	}