AspectRatio

A layout primitive that locks its host to a fixed width-to-height ratio, clipping whatever content it wraps so the box keeps its shape regardless of the content's own intrinsic size.

Opening keynote poster — Opening keynote16 / 9 · 42 min

Podcast cover art — Season 3 cover1 / 1 · cover art

Slide deck preview — Slide deck4 / 3 · 24 slides

View code

<div mix={[hstack({ gap: 5, align: "start" }), flexWrap()]}>
	<figure mix={[vstack({ gap: 2, align: "stretch" }), is("13rem"), m(0)]}>
		<AspectRatio ratio="16 / 9" mix={[rounded("lg")]}>
			<img
				src={POSTERS.keynote}
				alt="Opening keynote poster"
				mix={[is("100%"), fit("cover")]}
			/>
		</AspectRatio>
		<figcaption mix={[vstack({ gap: 1, align: "start" })]}>
			<span mix={[text("sm"), weight("medium")]}>Opening keynote</span>
			<Badge variant="secondary" color="neutral">16 / 9 · 42 min</Badge>
		</figcaption>
	</figure>

	<figure mix={[vstack({ gap: 2, align: "stretch" }), is("9rem"), m(0)]}>
		<AspectRatio ratio="1 / 1" mix={[rounded("lg")]}>
			<img src={POSTERS.album} alt="Podcast cover art" mix={[is("100%"), fit("cover")]} />
		</AspectRatio>
		<figcaption mix={[vstack({ gap: 1, align: "start" })]}>
			<span mix={[text("sm"), weight("medium")]}>Season 3 cover</span>
			<Badge variant="secondary" color="neutral">1 / 1 · cover art</Badge>
		</figcaption>
	</figure>

	<figure mix={[vstack({ gap: 2, align: "stretch" }), is("11rem"), m(0)]}>
		<AspectRatio ratio={4 / 3} mix={[rounded("lg")]}>
			<img src={POSTERS.slide} alt="Slide deck preview" mix={[is("100%"), fit("cover")]} />
		</AspectRatio>
		<figcaption mix={[vstack({ gap: 1, align: "start" })]}>
			<span mix={[text("sm"), weight("medium")]}>Slide deck</span>
			<Badge variant="secondary" color="neutral">4 / 3 · 24 slides</Badge>
		</figcaption>
	</figure>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { AspectRatio } from "@sdxc/ui";

Fills its container's inline axis and clips any overflow. The ratio rides on the --ui-aspect-ratio custom property, set per instance from the ratio prop, so an ancestor's stylesheet can override it on its own.

Examples

<AspectRatio ratio={4 / 3} />

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`ratio?`	`Ratio`	Width-to-height ratio the host maintains. Defaults to a square.

Also accepts everything in TagProps<"div">.