Aspect Ratio
Aspect Ratio
Displays content within a desired ratio. Commonly used for images, videos, and cards.
16:9 Ratio (Video)
Standard widescreen video aspect ratio.
1:1 Ratio (Square)
Perfect for profile pictures and avatars.
4:3 Ratio (Classic)
Traditional photography aspect ratio.
21:9 Ultra Wide
Cinematic ultra-wide ratio for hero banners.
21:9 Ultra Wide Banner
With Placeholder Content
Use with any content, not just images.
1:1
4:3
16:9
- Uses the native CSS
aspect-ratioproperty - Accepts any numeric ratio as a
double(width / height) - Child content is positioned absolutely within the container
- Works with any child content — images, videos, or custom markup
Features
- Uses native CSS aspect-ratio property
- Accepts any numeric ratio as double (width / height)
- Content is positioned absolutely within the container
- Works with any child content (images, videos, placeholders)
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Ratio | double | 1 | Width/height ratio as a decimal (e.g. 16.0/9.0). |
| Class | string? | — | Additional CSS classes applied to the container. |
| ChildContent | RenderFragment? | — | Content to display inside the container. |