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.
1:1 Ratio (Square)
Perfect for profile pictures and avatars.
4:3 Ratio (Classic)
Traditional photography aspect ratio.
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.AspectRatioUsage
<AspectRatio Ratio="16.0/9.0">
<img src="image.jpg" class="w-full h-full object-cover" />
</AspectRatio>