Media box that holds a fixed ratio through the native CSS aspect-ratio property. The child image fills and crops.
INSTALL
1pnpm dlx @sayagodev/mo add aspect-ratio
Or import the files from the package (no copy):
1import"@sayagodev/mo/css/aspect-ratio.css";
EXAMPLES
Landscape 16/9
1<divdata-aspect-ratio="16/9"style="max-width:24rem;border-radius:var(--radius-large)">2<imgsrc="https://avatar.vercel.sh/shadcn1"alt="Photo by shadcn"/>3</div>4
Portrait 9/16
1<divdata-aspect-ratio="9/16"style="max-width:10rem;border-radius:var(--radius-large)">2<imgsrc="https://avatar.vercel.sh/shadcn1"alt="Photo by shadcn"/>3</div>4
Square 1/1
1<divdata-aspect-ratio="1/1"style="max-width:12rem;border-radius:var(--radius-large)">2<imgsrc="https://avatar.vercel.sh/shadcn1"alt="Photo by shadcn"/>3</div>4
[data-aspect-ratio]attributeDefaults to 16/9; named values 1/1 · 4/3 · 9/16 · 21/9
[data-slot="aspect-ratio"]attributeShadcn alias — same styles as [data-aspect-ratio]
> :is(img, video, iframe)elementFills 100% and crops with object-fit: cover via shared.css
--mo-aspect-ratio / --ratiotokenAny custom ratio, e.g. 3/2 — --ratio is the shadcn-compatible alias
FILES
src/css/aspect-ratio.css
Install:mo add aspect-ratio
THEMING · PLAYGROUND
This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.
Tokens & hooks — edit live
Global tokens
--muted
Component hooks
--mo-aspect-ratio
Preview
Your CSS
Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.
