Aspect Ratio

Displays content within a desired ratio.

tsx

1
2
3
4
5
6
7<AspectRatio ratio={16 / 9} className="w-full max-w-sm rounded-lg bg-muted">
  <img
    src="https://avatar.vercel.sh/shadcn1"
    alt="Photo"
    className="h-full w-full rounded-lg object-cover"
  />
</AspectRatio>

AspectRatio — wrapper qui force son enfant à respecter un ratio largeur/hauteur donné. Utile pour intégrer des images, vidéos ou iframes responsive sans jump de layout au chargement.

Implémentation : CSS aspect-ratio: W/H natif (Chrome 88+, Firefox 89+, Safari 15+). Aucun JS, aucun padding-hack.

Installation

Terminal

$ bext ui add aspect-ratio

Usage

tsx

1
2
3
4
5import { AspectRatio } from "@bext-stack/ui/primitives"

<AspectRatio ratio={16 / 9} className="w-full max-w-sm rounded-lg bg-muted">
  <img src="/photo.jpg" alt="Photo" className="h-full w-full object-cover rounded-lg" />
</AspectRatio>

Anatomy

<AspectRatio ratio={16 / 9}>{child}</AspectRatio>

API Reference

AspectRatio

Prop	Type	Default	Description
ratio	number \| string	—	Ratio largeur/hauteur (`16 / 9`, `1 / 1`, `9 / 16`…). Un string comme `"4/3"` est aussi accepté.
children	ReactNode	—	Le contenu — typiquement une image (<img className="h-full w-full object-cover" />) ou un iframe (<iframe className="h-full w-full" />).
className	string	—	undefined

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
data-slot="aspect-ratio"	AspectRatio root	—	undefined

Accessibility

Purement décoratif — pas de sémantique ajoutée. Si le contenu est une image, garder son alt. Si c'est un iframe, garder son title. Pour la mise en page RTL, wrapper avec dir="rtl" sur un ancêtre.

Examples

Square

tsx

1
2
3<AspectRatio ratio={1 / 1} className="w-full max-w-[12rem] rounded-lg bg-muted">
  <img src="…" alt="Photo" className="h-full w-full rounded-lg object-cover" />
</AspectRatio>

Portrait

tsx

1
2
3<AspectRatio ratio={9 / 16} className="w-full max-w-[10rem] rounded-lg bg-muted">
  <img src="…" alt="Photo" className="h-full w-full rounded-lg object-cover" />
</AspectRatio>

RTL

منظر طبيعي جميل

tsx

1
2
3
4
5
6
7
8<figure className="w-full max-w-sm" dir="rtl">
  <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
    <img src="…" alt="منظر طبيعي جميل" className="h-full w-full rounded-lg object-cover" />
  </AspectRatio>
  <figcaption className="mt-2 text-center text-sm text-muted-foreground">
    منظر طبيعي جميل
  </figcaption>
</figure>

YouTube embed (16 / 9)

tsx

1
2
3
4
5
6
7
8<AspectRatio ratio={16 / 9} className="rounded-lg overflow-hidden">
  <iframe
    src="https://www.youtube.com/embed/..."
    className="h-full w-full"
    allow="autoplay; encrypted-media"
    allowFullScreen
  />
</AspectRatio>

Try it live Open in play

Edit this example live in the bext playground — it compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// An aspect-ratio box locks its child to a fixed width:height. Here a
// 16/9 frame stays in proportion however wide its container is.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Aspect Ratio</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A box constrained to a fixed proportion.</p>
      <div style={{ marginTop: 22, maxWidth: 420 }}>
        <div style={{ aspectRatio: "16 / 9", borderRadius: 12, border: "1px solid #e2e8f0", background: "#f1f5f9", display: "flex", alignItems: "center", justifyContent: "center", color: "#475569", fontSize: 15, fontWeight: 600 }}>
          16 / 9
        </div>
        <p style={{ color: "#64748b", fontSize: 13, marginTop: 10 }}>The frame keeps its 16:9 shape at any width.</p>
      </div>
    </main>
  );
}

The React idiom — same UI, for comparison.

← Alert Dialog Avatar →

On This Page