Aspect Ratio Component

Displays content within a desired ratio. Commonly used for images, videos, and cards.

16:9 Ratio (Video)

Standard widescreen video aspect ratio.

Photo by Drew Beamer

1:1 Ratio (Square)

Perfect for profile pictures and avatars.

Avatar

4:3 Ratio (Classic)

Traditional photography aspect ratio.

Photo by David Marcu

21:9 Ultra Wide

Cinematic ultra-wide ratio for hero banners.

21:9 Ultra Wide Banner

With Placeholder Content

Use with any content, not just images.

1:1
4:3
16:9

Features

  • Uses native CSS aspect-ratio property
  • Accepts any numeric ratio as double (width / height)
  • Content is positioned absolutely within the container
  • Works with any child content (images, videos, placeholders)

Installation

@using BlazorUI.Components.AspectRatio

Usage

<AspectRatio Ratio="16.0/9.0">
    <img src="image.jpg" class="w-full h-full object-cover" />
</AspectRatio>
An unhandled error has occurred. Reload 🗙