Aspect ratio

Keeps media at a defined aspect ratio while it fills the available box.

Preview

16 : 9

In action

Frame

The field is the picture.

When to use

Use it for

Images, video, and embeds that must hold a ratio before they load.
ratio as width over height.

Not for

Text boxes; let content set the height.
Avatars; use Avatar.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { AspectRatio } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/aspect-ratio.

2. Vendor the source

npx @noorddev/vlak-cli add aspect-ratio

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/aspect-ratio.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { AspectRatio } from "@noorddev/vlak-react";

<AspectRatio ratio={16 / 9}>
  <img src="/cover.jpg" alt="Press hall" />
</AspectRatio>

Props

AspectRatio

Prop	Type	Default	Description
`ratio`	`number`	`16 / 9`	Width over height, e.g. 16 / 9.

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

Layout only; the media inside carries its own alt or title.

Markup

<div class="rs-ratio" style="aspect-ratio:16/9;max-width:280px;background:var(--divider-subtle)"></div>

Classes

.rs-ratio