Aspect Ratio

16 / 94 / 31 / 1

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

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

navius add aspect-ratio

Anatomy

Import the part and assemble it.

@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.

Data attributes

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.