AspectRatio

Keeps media at a shape, 16:9 by default.

An interactive page: C# runs over a Blazor Server connection.

Keeps its content at a fixed shape, such as 16:9 for a video or 1:1 for an avatar. Images and videos inside fill it and are cropped to fit.

Usage

razor

<AspectRatio Ratio="16 / 9.0"><img src="..." alt="..." /></AspectRatio>

Shapes

Use Ratio for the shape, width over height: the same picture at 16:9 (the default), 1:1 and 4:5, cropped to fill each.

Preview Code

Preview

16:9, the default

1:1

4:5

Code

Shapes.razor

<Grid Columns="3" Gap="4" Grow>
    <Column Gap="2">
        <AspectRatio Radius="Radius.Lg">@Photo</AspectRatio>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">16:9, the default</TextBlock>
    </Column>
    <Column Gap="2">
        <AspectRatio Ratio="1" Radius="Radius.Lg">@Photo</AspectRatio>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">1:1</TextBlock>
    </Column>
    <Column Gap="2">
        <AspectRatio Ratio="4 / 5.0" Radius="Radius.Lg">@Photo</AspectRatio>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">4:5</TextBlock>
    </Column>
</Grid>

Mode support

What works in each mode, AspectRatio
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It adds no name or role: an img inside still needs its alt, an iframe its title.
What doesn't fit the shape is cut off, not scrolled, so text inside can be lost when people zoom in.

Parameters

AspectRatio parameters
Prop	Type	Default
`Ratio`Width divided by height.	`double`	`1.7777777777777777`
`As`The element to render: div on a Box; components built on it set their own (List a ul, Section a section).	`string`	`"div"`
`ChildContent`The content.	`RenderFragment?`

Plus 25 surface props, 16 item props and 4 common props.

Full API