Aspect Ratio

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

import { Div, Img } from "@implementjs/core";
import { AspectRatio } from "@/lib/components/ui/aspect-ratio";

export default function AspectRatioDemo() {
	return Div(
		{ class: "w-full max-w-sm" },
		AspectRatio(
			{ ratio: 16 / 9, class: "overflow-hidden rounded-lg bg-muted" },
			Img({
				src: "https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80",
				alt: "Photo by Alvaro Pinot",
				class: "size-full object-cover",
			}),
		),
	);
}

AspectRatio holds its content to a ratio of width to height — a video frame, an image placeholder, a map embed. Give the parent a width and the height follows.

import { AspectRatio } from "@implementjs/primitives";

AspectRatio({ ratio: 16 / 9 }, Img({ src: "...", alt: "...", class: "size-full object-cover" }));

It accepts optional props and children — pass a props object when you need attributes, or pass children directly. See createComponent. Extra props are forwarded onto the underlying Div.

Ratio

ratio is width divided by height and defaults to 1 (a square). Pass a number to seed it, or a signal to control it from outside:

AspectRatio({ ratio: 16 / 9 }, Video());
AspectRatio({ ratio: 4 / 3 }, Screenshot());
AspectRatio({ ratio: 1 }, Album());

How it renders

The primitive renders two elements: a sized wrapper that reserves the ratio with padding, and inside it the root Div your props and children land on, stretched to fill. Content should usually fill the root — size-full object-cover on an image, size-full on an iframe.

There is no aria here; an aspect ratio is purely layout. Accessibility comes from the content you put inside, like the image alt text.

Styling

Style the root through class like any element; it sets data-aspect-ratio-root. Rounded corners want overflow-hidden so the content clips to them:

AspectRatio(
	{ ratio: 16 / 9, class: "overflow-hidden rounded-lg bg-muted" },
	Img({ src: "...", alt: "...", class: "size-full object-cover" }),
);

API Reference