Aspect Ratio

A container that maintains a specific aspect ratio for its content. This is useful for displaying images, videos, or any other media that needs to scale responsively while preserving its proportions.

16:9 Aspect Ratio

This example demonstrates a common 16:9 aspect ratio, perfect for video embeds or landscape images. The `Ratio` is calculated as `width / height`.

Source

<div class="w-full max-w-md">
    <RzAspectRatio Ratio="16.0 / 9.0">
        <img src="/images/card1.jpg" alt="Image with 16:9 aspect ratio" class="rounded-md object-cover w-full h-full" />
    </RzAspectRatio>
</div>

Square Aspect Ratio

This example shows a 1:1 aspect ratio, which creates a perfect square. The `Ratio` parameter is set to `1`.

Source

<div class="w-full max-w-xs">
    <RzAspectRatio Ratio="1">
        <div class="bg-muted rounded-md flex items-center justify-center w-full h-full">
            <span class="text-muted-foreground">1:1 Aspect Ratio</span>
        </div>
    </RzAspectRatio>
</div>

RzAspectRatio Component Parameters

Property	Description	Type	Default
`Ratio`	The desired aspect ratio, calculated as width / height. For example, a 16:9 ratio would be `16.0 / 9.0`.	`double`	`1`
`ChildContent`	The content to be rendered inside the aspect ratio container.	`RenderFragment?`	`null`