Skip to content
Navius

Aspect Ratio

Overview

Section titled “Overview”

Aspect Ratio constrains its content to a desired width/height ratio via the CSS padding-bottom technique: no JavaScript, no layout shift. It accepts any positive Ratio (e.g. 16.0 / 9.0) and falls back to a square (1 / 1) for a non-positive value.

Anatomy

Section titled “Anatomy”
@using Navius.Primitives.Components.AspectRatio


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

Root

Section titled “Root”
Prop Type Default Description
Ratio double 1.0 The desired width/height ratio. Falls back to 1.0 for any non-positive value.
ChildContent RenderFragment? - The content to constrain.
Attributes IDictionary<string, object>? - Forwarded to the inner content element. style is merged (the positioning declarations are appended, never overwritten).

Data attributes

Section titled “Data attributes”
Part Attribute Description
Root data-navius-aspect-ratio Present on the outer wrapper element.
Root data-navius-aspect-ratio-inner Present on the inner content element (the one consumer attributes are forwarded to).

ARIA mechanism

Section titled “ARIA mechanism”

Aspect Ratio is a layout primitive with no interactive behavior: it wires no roles, states, or keyboard handling of its own. Any semantics of the content placed inside it (for example an alt on an image) come entirely from that content. Rendering is covered by the Playwright browser test suite.