Aspect Ratio

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<div data-aspect-ratio="16/9" style="max-width:24rem;border-radius:var(--radius-large)">2  <img src="https://avatar.vercel.sh/mo1" alt="Landscape photo" />3</div>4

Portrait 9/16

1<div data-aspect-ratio="9/16" style="max-width:10rem;border-radius:var(--radius-large)">2  <img src="https://avatar.vercel.sh/mo1" alt="Landscape photo" />3</div>4

Square 1/1

1<div data-aspect-ratio="1/1" style="max-width:12rem;border-radius:var(--radius-large)">2  <img src="https://avatar.vercel.sh/mo1" alt="Landscape photo" />3</div>4

Ultrawide 21/9

1<div data-aspect-ratio="21/9" style="max-width:32rem;border-radius:var(--radius-large)">2  <img src="https://avatar.vercel.sh/mo1" alt="Ultrawide photo" />3</div>4

Video 16/9

1<div data-aspect-ratio="16/9" style="max-width:24rem;border-radius:var(--radius-large)">2  <video autoplay loop muted playsinline poster="https://avatar.vercel.sh/mo1" style="border-radius:inherit">3    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />4  </video>5</div>6

RTL

منظر طبيعي جميل

1<figure dir="rtl" style="width:100%;max-width:24rem">2  <div data-aspect-ratio="16/9" style="border-radius:var(--radius-large)">3    <img src="https://avatar.vercel.sh/mo1" alt="صورة جميلة" />4  </div>5  <figcaption style="margin-top:var(--space-2);text-align:center;font-size:var(--text-7);color:var(--muted-foreground)">منظر طبيعي جميل</figcaption>6</figure>7

USAGE

1<div data-aspect-ratio="16/9">2  <img src="…" alt="Photo" />3</div>

API

NAMEKINDDESCRIPTION

[data-aspect-ratio]attributeDefaults to 16/9; named values 1/1 · 4/3 · 9/16 · 21/9

[data-slot="aspect-ratio"]attributeAlias — 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 shorthand 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.

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.