<div class="w-full max-w-md">
<AspectRatio Ratio="(16d / 9d)" Class="bg-muted rounded-lg">
<img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
class="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale" />
</AspectRatio>
</div>Installation
Install the aspect ratio component using the command or manual steps.
blazor-shadcn add aspect-ratioUsage
@using BlazorShadcn.Components.UI<AspectRatio Ratio="(16d / 9d)">
<img src="..." alt="Image" class="rounded-md object-cover" />
</AspectRatio>Examples
Square
A square aspect ratio component using the ratio=1 prop. This is useful for displaying images in a square format.
<div class="w-full max-w-md">
<AspectRatio Ratio="1" Class="bg-muted rounded-lg">
<img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
class="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale" />
</AspectRatio>
</div>Portrait
A portrait aspect ratio component using the ratio=(9d / 16d) prop. This is useful for displaying images in a portrait format.
<div class="h-96 w-auto max-w-[13.5rem]">
<AspectRatio Ratio="(9d / 16d)" Class="bg-muted rounded-lg">
<img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
class="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale" />
</AspectRatio>
</div>API Reference
AspectRatio
The AspectRatio component displays content within a desired ratio.
For more information, see the Radix UI documentation.