Skip to content
Components

AspectRatio

Constrains its content to a fixed width-to-height ratio, sizing itself to the available width with CSS aspect-ratio; drop a single child (image, video, iframe, or a plain element) inside and size it to fill the framed box.

16 : 9

Usage

import { AspectRatio, aspectRatioAnatomy } from "@instruments/materia-ui/components/aspect-ratio";

Best practices

  • Give it exactly one child and let it fill - set the media to size-full object-cover; AspectRatio sizes to the available width and derives height from ratio.

  • Use as to change the element (a tag); use render only to swap in a component (e.g. a router Link). Never render={<Box as=…/>} - pass as directly.

Props

PropTypeDefaultDescription
as"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Ref and event-handler types remain the default element's. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

rationumber16 / 9

Desired width-to-height ratio, expressed as a single number (width / height).

Also exports

  • constaspectRatioAnatomy

Anatomy

AspectRatio

aspect-ratio

Frames a single child at a fixed width-to-height ratio