Enforces an aspect ratio on content (e.g. 16/9, 1/1). Matches shadcn-svelte Aspect Ratio.
Aspect Ratio
Wrapper that keeps a fixed aspect ratio. Put a single child (e.g. img or video) in the default slot.
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
bashbash
npx rizzo-css add AspectRatio
bashbash
pnpm dlx rizzo-css add AspectRatio
bashbash
npx rizzo-css add AspectRatio
bashbash
bunx rizzo-css add AspectRatio
Props
ratio (number, optional) - Width/height, e.g. 16/9, 1/1 (default: 16/9)
Live Example (16:9)
16:9
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
<script setup>
import AspectRatio from '@/components/rizzo/AspectRatio.vue';
</script>
<template>
<!-- Set ratio via CSS vars on a wrapper; component provides .aspect-ratio -->
<div style="--aspect-ratio: 16/9; --aspect-ratio-padding: 56.25%;">
<AspectRatio>
<img src="/poster.jpg" alt="" />
</AspectRatio>
</div>
</template>
npm 
pnpm 
yarn 
bun