Aspect Ratio

Constrains content to a given width/height ratio using Radix UI. Useful for images, videos, and embed containers that must maintain a consistent shape across viewports.

Built on Radix UI.

✓Wraps any content in a fixed ratio container
✓Accepts any valid CSS ratio (16/9, 4/3, 1, etc.)
✓Uses Radix UI AspectRatio primitive

16:9

import { Aspect Ratio }from "@aetherstack/ui"

aspect ratio.tsx

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

export function AspectRatioDemo() {
  return (
    <div className="w-full max-w-sm">
      <AspectRatio ratio={16 / 9}>
        <img
          src="/placeholder.jpg"
          alt="placeholder"
          className="h-full w-full rounded-lg object-cover"
        />
      </AspectRatio>
    </div>
  )
}

Usage

Image with 16:9 ratio

Use AspectRatio to constrain an image to a specific ratio without layout shift.

16 : 9

Square (1:1)

Use ratio={1} for square thumbnails and avatar containers.

1:1

4:3 classic

Traditional photo and presentation aspect ratio.

4:3

Props

Prop	Type	Default	Description
ratio	number	1	The desired width/height ratio. Pass a fraction like 16/9 or a decimal like 1.78.
className	string	—	Additional Tailwind classes for the container element.

* Required props

Accessibility

→AspectRatio is a layout utility — it has no implicit ARIA role.
→Ensure child images have meaningful alt text; the ratio wrapper itself is transparent to assistive technology.
→Do not use for decorative images that should be hidden from screen readers — add aria-hidden to the image instead.