Aspect Ratio

Overview

AspectRatio renders NaviusAspectRatio and adds no classes or behavior of its own: it forwards Ratio and every consumer attribute (including class) straight through to the primitive’s Root.

Install

navius add aspect-ratio --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<div class="w-[450px]">
    <ZitsAspectRatio Ratio="16.0 / 9.0" class="overflow-hidden rounded-md bg-muted">
        <img src="/landscape.jpg" alt="A scenic landscape" class="h-full w-full object-cover" />
    </ZitsAspectRatio>
</div>

Parts and props

AspectRatio is a single-part re-export. Ratio and every consumer attribute (including class) pass through to NaviusAspectRatio unchanged; the wrapper adds no props of its own.

Styling surface

class and any other attribute on ZitsAspectRatio splat straight onto the rendered NaviusAspectRatio Root, no merge or override logic sits in between.

Data attribute hooks

None. The wrapper’s markup targets no data-* attributes of its own.

Underlying primitives

• NaviusAspectRatio