Components / Aspect Ratio

Aspect Ratio

Displays content within a desired ratio.

A landscape photograph by Tobias Tullius

razor

<NaviusAspectRatio Ratio="16.0 / 9.0"
                  class="overflow-hidden rounded-lg">
    <img src="/landscape.jpg" alt="A landscape"
         class="h-full w-full object-cover" />
</NaviusAspectRatio>

Features

Accepts any custom ratio via the Ratio prop (e.g. 16.0 / 9.0).
Pure CSS padding-bottom technique: no JavaScript, no layout shift.
Forwards every consumer attribute (and merges style) onto the content element.
Falls back to a square (1 / 1) for any non-positive ratio.

Installation

Install the brain, or copy just this primitive in with the CLI.

Terminal bash

navius add aspect-ratio

Anatomy

Import the part and assemble it.

razor

@using Navius.Primitives.Components.AspectRatio

<NaviusAspectRatio>
    <!-- content -->
</NaviusAspectRatio>

API Reference

Root

Contains the content you want to constrain to a given ratio. Renders a div wrapping the content element.

Prop	Type	Default
Ratio	double	1.0
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-navius-aspect-ratio]	Present on the outer wrapper element.
[data-navius-aspect-ratio-inner]	Present on the inner content element (the one consumer attributes are forwarded to).

Accessibility

Aspect Ratio is a layout primitive with no interactive behaviour, so it exposes no roles or keyboard interactions of its own. Ensure any media you place inside carries appropriate semantics; for example, an alt on images.