AspectRatio

Overview

AspectRatio maintains a consistent width-to-height ratio for its children. It uses the CSS aspect-ratio property and is essential for responsive images, videos, maps, and embedded content that must maintain proportions across screen sizes.

Usage

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

Common Ratios

<AspectRatio ratio={1}>1:1 — Square avatars, thumbnails</AspectRatio>
<AspectRatio ratio={16 / 9}>16:9 — Video, hero images</AspectRatio>
<AspectRatio ratio={4 / 3}>4:3 — Classic photos</AspectRatio>
<AspectRatio ratio={21 / 9}>21:9 — Ultra-wide banners</AspectRatio>

With Video

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

Accessibility

AspectRatio is a purely visual layout component. Ensure the content within (images, videos) has appropriate alt text and ARIA attributes.

API Reference

AI Decision Guide

Use AspectRatio when:

• Displaying images that must maintain proportions
• Embedding videos or iframes
• Creating consistent card thumbnails in a grid

Don't use AspectRatio when:

• Content has a fixed height → use explicit height
• Content should fill available space → let it flow naturally

Related Components