AspectRatio
A box at a fixed ratio, so media doesn't jump the layout while it loads.
ratio takes 16 / 9 or "16 / 9" — anything CSS aspect-ratio accepts. A bare <img>, <video> or <iframe> child fills the box. For an image or video, fit="cover" (default) crops to fill and fit="contain" letterboxes — for logos or screenshots that must not lose an edge; the bars are transparent, so give the box a background. Anything else you put inside is yours to size.
For images specifically, Img already has ratio plus lazy loading and a placeholder; this is for the rest — video, embeds, a map, a chart.
Basic
Usage
ts
import { BlessAspectRatio } from "blessing-ui";API
Props
| Name | Type | Default | Description |
|---|---|---|---|
ratio | string | number | 16 / 9 | `16 / 9` or `"16 / 9"` — anything `aspect-ratio` accepts |
fit | "cover" | "contain" | "cover" | how a bare img / video child fills the box (an iframe always fills it) |
Slots
| Name | Scope | Description |
|---|---|---|
default | — |