Skip to content
← Inventory

AspectRatio

Constrains its content to a fixed width-to-height ratio, sizing itself to the available width. Wraps Radix AspectRatio; drop any single child (image, video, iframe, or a plain element) inside and it fills the framed box.

16 : 9

Usage

import { AspectRatio, aspectRatioAnatomy } from "@desk/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.

Props

PropTypeDefaultDescription
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