AspectRatio
Displays content within a desired ratio
SSR mode
Examples
16:9 ratio
16:9
1:1 ratio (square)
1:1
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| AspectRatio | Wraps content in a container that holds a fixed width-to-height ratio using the padding-bottom technique. The inner content is absolutely positioned to fill the box. |
AspectRatio
Wraps content in a container that holds a fixed width-to-height ratio using the padding-bottom technique. The inner content is absolutely positioned to fill the box.
| Property | Type | Required | Description |
|---|---|---|---|
| Ratio | double | Width divided by height. Default: 1 (square). Use 16.0/9.0 for widescreen, 4.0/3.0 for classic photo, etc. | |
| ClassName | string? | Extra CSS classes appended to the inner content container. | |
| ChildContent | RenderFragment? | Content placed inside the ratio box. Commonly an <img> with object-fit: cover. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the outer wrapper. |