# Aspect Ratio

Source: https://lumeo.nativ.sh/components/aspect-ratio

# Aspect Ratio

Displays content within a desired ratio.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<AspectRatio />

## When to Use

-   Maintaining consistent image or video aspect ratios across layouts
-   Video embeds that need to preserve 16:9 or other standard ratios
-   Responsive media cards where the thumbnail should not distort
-   Grid layouts with uniformly sized media containers

Preview Code

16:9 Ratio

16:9 Aspect Ratio

Preview Code

Different Ratios

1:1 (Square)

1:1

4:3

4:3

21:9 (Ultra-wide)

21:9

Preview Code

Media Card

Getting Started with Lumeo

Learn how to build beautiful UIs with Lumeo components.

Preview Code

Ratio — interactive

Pick a ratio to see it applied live.

1:14:316:921:93:22:3

16:9

## API Reference

### AspectRatio

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

Content to display inside the aspect ratio container.

Ratio

double

1

The desired width-to-height ratio (e.g. 16.0/9.0).

Class

string?

null

Additional CSS classes for the inner container.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes applied to the outer wrapper.

## Related Components

-   [Avatar](/components/avatar) — Circular or rounded image containers for user profile pictures
-   [Card](/components/card) — Card container often used with AspectRatio for media cards
-   [Skeleton](/components/skeleton) — Loading placeholder that can match aspect ratio dimensions