Aspect Ratio

A simple wrapper that enforces a consistent aspect ratio using a CSS custom property. Useful for images, videos, maps, and other embedded content that needs to maintain proportions across viewport sizes.

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

export default function AspectRatioDemo() {
  return (
    <div className="w-[450px]">
      <AspectRatio ratio={16 / 9}>
        <img
          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
          alt="Photo by Drew Beamer"
          className="size-full rounded-md object-cover"
        />
      </AspectRatio>
    </div>
  )
}

Anatomy

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

<AspectRatio ratio={16 / 9}>
  <img src="/image.jpg" alt="Landscape" className="size-full object-cover" />
</AspectRatio>

Examples

16:9 video

<AspectRatio ratio={16 / 9}>
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    className="size-full"
    allowFullScreen
  />
</AspectRatio>

Square image

<AspectRatio ratio={1}>
  <img
    src="/avatar.jpg"
    alt="Profile"
    className="size-full rounded-md object-cover"
  />
</AspectRatio>

4:3 map

<div className="w-96">
  <AspectRatio ratio={4 / 3} className="rounded-lg overflow-hidden">
    <img src="/map.png" alt="Map" className="size-full object-cover" />
  </AspectRatio>
</div>

API Reference

AspectRatio

Renders a <div> with a CSS aspect-ratio driven by the --ratio custom property.

Prop	Type	Default	Description
`ratio`	`number`	—	Required. The width-to-height ratio (e.g. `16 / 9`, `1`, `4 / 3`).
`className`	`string`	—
`children`	`ReactNode`	—