Aspect Ratio
Constrain children to a specific width-to-height ratio (e.g. 16/9 for video, 1/1 for square).
16 : 9
1 : 1
2 : 3
Installation
pnpm
pnpm dlx @hex-core/cli add aspect-ratioAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 1 | Width-to-height ratio (e.g. 16/9 ≈ 1.778) |
AI Guidance
When to use
Use when an image or iframe must maintain a specific ratio regardless of container width: video thumbnails, product images, hero banners, embeds.
When not to use
Don't use for content with known fixed dimensions (just use width/height). Don't use for text content (ratios don't make sense for prose).
Common mistakes
- Passing ratio as a string instead of a number (use {16/9}, not '16/9')
- Forgetting that children must fill 100% width + height (add object-cover or similar)
Accessibility
AspectRatio is purely structural. Ensure inner <img> has alt text and inner <iframe> has a descriptive title.
Token budget: 200