Aspect Ratio
Displays content within a desired width-to-height ratio.
Features
- Any ratio
- Any content
- No layout shift
- Style passthrough
- Headless
Installation
npm install @ariaui/aspect-ratio
Examples
Each playground fixes a different ratio (width ÷ height). Swap the inner node for video, iframe, or custom UI — the box keeps the proportion.
16 : 9
Common video and hero ratio. Pass ratio="16 / 9".
No preview output yet.
21 : 9
Ultra-wide framing for banners and film-style layouts.
No preview output yet.
4 : 3
Classic photo and slide ratio; preview width matches the other demos so the box shape reflects the ratio.
No preview output yet.
1 : 1
Square media tiles and avatars.
No preview output yet.
9 : 16
Vertical video and mobile-first previews.
No preview output yet.
Anatomy
import * as AspectRatio from "@ariaui/aspect-ratio";
export default function Example() {
return <AspectRatio.Root />;
}
API Reference
Root
Constrains its children to a fixed width-to-height ratio using a private padding-bottom wrapper. Public props and refs apply to the absolutely-positioned fill element.
| Prop | Type | Default |
|---|---|---|
ratio | number | string | 1 |
asChild | boolean | false |
Accessibility
The Aspect Ratio component has no ARIA role, keyboard behavior, or focus management of its own. Accessibility responsibility lies entirely with the content placed inside it.
Content requirements
<img>children must have a descriptivealtattribute.<video>children should carry atitleoraria-label.<iframe>children should carry atitle.
The outer and inner <div> elements carry no semantic role and are transparent to assistive technology.