Aspect Ratio

An aspect ratio holds its content in a frame with a fixed ratio of width to height. The frame takes its width from its parent and derives its height from the ratio, so an image or a video keeps its shape at every screen size.

PreviewCode

UsageCopy Anchor Link

import { AspectRatio } from "@biem/ui/components/ui/aspect-ratio";
import { generateGradient } from "@biem/ui/lib/generate-gradient";

const campaignVideo = generateGradient("Campaign video");

export function AspectRatioDefault() {
	return (
		<div className="w-full max-w-sm">
			<AspectRatio ratio={16 / 9}>
				<img src={campaignVideo} alt="Campaign video" className="size-full rounded-lg object-cover"/>
			</AspectRatio>
		</div>
	);
}

ExamplesCopy Anchor Link

SquareCopy Anchor Link

Assortment overviews and search results place many items side by side, and their pictures rarely share one shape. With ratio set to 1 / 1, every frame is as tall as it is wide, so the items line up evenly and users compare them at a glance.

PreviewCode

PortraitCopy Anchor Link

Some content is made for upright formats, such as signage for displays mounted in portrait orientation. A ratio below 1, as in 9 / 16, makes the frame taller than wide, so users see that content in the shape it was made for. Since the height follows the width, the element around the frame sets a width that keeps it within view.

PreviewCode

API ReferenceCopy Anchor Link