Aspect Ratio

Displays content within a desired ratio, styled entirely with Tailwind utilities.

Basic (16 / 9)

Set Ratio to the desired width / height. Style the inner element with utilities — they merge with the component's positioning styles.

<div class="w-full max-w-md">
    <BitBhAspectRatio Ratio="16d / 9d" class="overflow-hidden rounded-xl shadow-md">
        <img class="h-full w-full object-cover" src="/landscape.jpg" alt="Landscape" />
    </BitBhAspectRatio>
</div>

Square (1 / 1)

The default ratio is 1 — a perfect square. Great for avatars; the Ratio parameter is optional.

@* Ratio defaults to 1 (square) — the parameter is optional *@
<div class="w-48">
    <BitBhAspectRatio class="overflow-hidden rounded-xl shadow-md">
        <img class="h-full w-full object-cover" src="/avatar.jpg" alt="Avatar" />
    </BitBhAspectRatio>
</div>

Portrait (3 / 4)

Ratios below 1 produce taller-than-wide boxes.

<div class="w-48">
    <BitBhAspectRatio Ratio="3d / 4d" class="overflow-hidden rounded-xl shadow-md">
        <img class="h-full w-full object-cover" src="/portrait.jpg" alt="Portrait" />
    </BitBhAspectRatio>
</div>

Non-image content

The inner element fills the reserved space, so flex centring works directly on the component.

2 : 1

<BitBhAspectRatio Ratio="2d / 1d"
               class="flex items-center justify-center rounded-xl bg-linear-to-br from-indigo-500 to-violet-500 text-2xl font-bold tracking-widest text-white">
    <span>2 : 1</span>
</BitBhAspectRatio>