Aspect Ratio
Locks content to a specific width-to-height ratio. Useful for images, videos, and embeds.
Install
Import path
Examples
Demo
Lock an image to a 16/9 box — it holds the shape at any width.
Product walkthrough · 16:9
Square
A 1/1 square crop for avatars and thumbnails.
Portrait
A 9/16 portrait box for vertical media.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { AspectRatio } from "@codefast/ui/aspect-ratio";
<AspectRatio ratio={16 / 9}>
<img src="…" alt="…" className="h-full w-full object-cover" />
</AspectRatio>
API reference
Props for each part of the component. All native element props are also forwarded.
AspectRatio
Constrains its child to a fixed width-to-height ratio.
| Prop | Type | Default | Description |
|---|---|---|---|
| ratio | number | 1 | Width ÷ height, e.g. 16 / 9. The child fills the box. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Purely a layout helper — give the inner media its own alt text.
- Use object-cover (or contain) on images so they fill the locked box correctly.
- Helps prevent layout shift by reserving space before media loads.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for images, video, embeds, and map tiles that must keep a shape.
- Combine with overflow-hidden + rounded corners for media cards.
Don’t
- Don’t use it for text content that should grow with its length.
- Don’t forget object-fit on the inner image.