Aspect Ratio

Displays content within a desired ratio, regardless of the content's intrinsic size.

Basic (16 / 9)

Wrap any content in BitBhAspectRatio and set Ratio to the desired width / height. The image fills the box at a constant 16:9 ratio no matter how wide the column gets.

<div class="ratio-frame">
    <BitBhAspectRatio Ratio="16d / 9d" class="ratio-box">
        <img class="ratio-media" src="/landscape.jpg" alt="Landscape" />
    </BitBhAspectRatio>
</div>

/* The library ships zero CSS — these styles are consumer-authored. */
.ratio-frame {
    width: 100%;
    max-width: 28rem;
}

.ratio-box {
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Make the media fill the ratio box */
.ratio-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Square (1 / 1)

The default ratio is 1 — a perfect square. Useful for avatars and thumbnails. You can omit the Ratio parameter entirely.

@* Ratio defaults to 1 (square) — the parameter is optional *@
<BitBhAspectRatio class="ratio-box">
    <img class="ratio-media" src="/avatar.jpg" alt="Avatar" />
</BitBhAspectRatio>

/* The library ships zero CSS — these styles are consumer-authored. */
.ratio-frame {
    width: 100%;
    max-width: 28rem;
}

.ratio-box {
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Make the media fill the ratio box */
.ratio-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A narrower frame suited to square avatars / thumbnails */
.ratio-frame-sm {
    max-width: 12rem;
}

Portrait (3 / 4)

Ratios smaller than 1 produce taller-than-wide boxes. Here 3 / 4 creates a portrait frame.

<BitBhAspectRatio Ratio="3d / 4d" class="ratio-box">
    <img class="ratio-media" src="/portrait.jpg" alt="Portrait" />
</BitBhAspectRatio>

/* The library ships zero CSS — these styles are consumer-authored. */
.ratio-frame {
    width: 100%;
    max-width: 28rem;
}

.ratio-box {
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Make the media fill the ratio box */
.ratio-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A narrower frame; a ratio below 1 yields a box taller than it is wide */
.ratio-frame-sm {
    max-width: 12rem;
}

Non-image content

The ratio box isn't limited to images — drop in any content. The inner element is absolutely positioned to fill the reserved space, so flex centring works as expected.

2 : 1

<BitBhAspectRatio Ratio="2d / 1d" class="ratio-box ratio-card">
    <span>2 : 1</span>
</BitBhAspectRatio>

/* The library ships zero CSS — these styles are consumer-authored. */
.ratio-frame {
    width: 100%;
    max-width: 28rem;
}

.ratio-box {
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Make the media fill the ratio box */
.ratio-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The inner element fills the ratio box, so flex centring works directly. */
.ratio-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}