Aspect Ratio
Displays content within a desired ratio.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <AspectRatio />
When to Use
- Maintaining consistent image or video aspect ratios across layouts
- Video embeds that need to preserve 16:9 or other standard ratios
- Responsive media cards where the thumbnail should not distort
- Grid layouts with uniformly sized media containers
16:9 Aspect Ratio
1:1 (Square)
1:1
4:3
4:3
21:9 (Ultra-wide)
21:9
Getting Started with Lumeo
Learn how to build beautiful UIs with Lumeo components.
Pick a ratio to see it applied live.
16:9
API Reference
AspectRatio
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | Content to display inside the aspect ratio container. |
| Ratio | double | 1 | The desired width-to-height ratio (e.g. 16.0/9.0). |
| Class | string? | null | Additional CSS classes for the inner container. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes applied to the outer wrapper. |