Aspect Ratio

Layout

Utility

Container that maintains a consistent aspect ratio for its content. Essential for responsive images, videos, and embedded media that need to preserve their proportions.

Preview

16:9 aspect ratio (default)

16:9 Aspect Ratio

Common Ratios

Popular aspect ratios for different use cases

1:1 (Square)

1:1

4:3 (Standard)

4:3

16:9 (Widescreen)

16:9

21:9 (Ultrawide)

21:9

With Image

Responsive image maintaining aspect ratio

Props

AspectRatio component API reference

Prop	Type	Default	Description
`ratio`	`number`	`16 / 9`	The aspect ratio as a number (width / height)
`children`	`ReactNode`	—	Content to render inside the aspect ratio container
`className`	`string`	—	Additional CSS classes for the container
`...props`	`HTMLAttributes<HTMLDivElement>`	—	All standard div attributes are supported

Usage

Import and implementation example

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

export default function Example() {
  return (
    <>
      {/* Default 16:9 ratio */}
      <AspectRatio>
        <img src="/image.jpg" className="object-cover w-full h-full" />
      </AspectRatio>

      {/* Square ratio */}
      <AspectRatio ratio={1}>
        <img src="/avatar.jpg" className="object-cover w-full h-full" />
      </AspectRatio>

      {/* 4:3 standard ratio */}
      <AspectRatio ratio={4 / 3}>
        <video src="/video.mp4" className="w-full h-full" />
      </AspectRatio>

      {/* 21:9 ultrawide */}
      <AspectRatio ratio={21 / 9} className="bg-slate-100 rounded-lg">
        <iframe
          src="https://example.com/embed"
          className="absolute inset-0 w-full h-full"
        />
      </AspectRatio>
    </>
  )
}

Features

Built-in functionality

Any aspect ratio: Supports any ratio value (e.g., 16/9, 4/3, 1, 21/9)
Responsive: Container adapts to available width while maintaining ratio
CSS-based: Uses padding-bottom technique for cross-browser support
Flexible content: Children are absolutely positioned to fill the container
Composable: Works with images, videos, iframes, and any content
Forward ref: Supports ref forwarding for DOM access

Accessibility

Usage guidelines

ARIA Attributes

Container is a standard div elementNo specific ARIA roles required

Keyboard Navigation

Key	Action
`N/A`	Container is not interactive by default

Notes

Images inside should have descriptive alt text
Videos should include captions or transcripts
Embedded content should be accessible at its source
Container does not trap focus or interfere with navigation

Related Components

Card Avatar Carousel