Aspect Ratio — Vanilla

Aspect Ratio

Wrapper that enforces an aspect ratio. Set --aspect-ratio: 16/9 (or e.g. 1/1) on the wrapper; put content inside aspect-ratio__inner.

Add this component

The command below includes <strong>AspectRatio</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add AspectRatio

bash bash Copy code

pnpm dlx rizzo-css add AspectRatio

bash bash Copy code

npx rizzo-css add AspectRatio

bash bash Copy code

bunx rizzo-css add AspectRatio

HTML

<div class="aspect-ratio" style="--aspect-ratio: 16/9;">
  <div class="aspect-ratio__inner">
    <img src="https://placehold.co/640x360" alt="" />
  </div>
</div>

Other frameworks: Astro · Svelte · Vue · React