Components / Aspect Ratio

Aspect Ratio

Constrains its content to a desired ratio. Pure layout from the brain (a padding-bottom wrapper holding an absolutely-positioned slot); no behaviour required.

Examples

Set Ratio to a width / height fraction. The default is 1.0 (square).

16 / 9

razor

<div class="w-[450px]">
    <ZitsAspectRatio Ratio="16.0 / 9.0" class="rounded-lg bg-muted">
        <div class="flex h-full w-full items-center justify-center text-sm text-muted-foreground">
            16 / 9
        </div>
    </ZitsAspectRatio>
</div>

Installation

Terminal bash

navius add aspect-ratio

API reference

Prop	Type	Default
Ratio	double	1.0
ChildContent	RenderFragment?	-