Aspect Ratio

<div className="w-full max-w-md">
  <AspectRatio
    ratio={16 / 9}
    className="flex flex-col items-center justify-center gap-2 rounded-md bg-surface-muted text-text-muted"
  >
    <ImageIcon className="size-6" />
    <span className="text-sm">Screenshot of acme-login.co</span>
  </AspectRatio>
</div>

Usage

import { AspectRatio } from "@zenoxai/ui/components/aspect-ratio"

<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md">
  <img
    src={screenshotUrl}
    alt="Sign-in page of acme-login.co"
    className="size-full object-cover"
  />
</AspectRatio>

Use it for media whose size is not known until it loads: page screenshots, video, maps, chart thumbnails. The box reserves its height up front, so the layout does not jump when the image arrives. Pass ratio as a division (16 / 9, 4 / 3, 1) and size the box by its width; the height follows.

Fill the box with size-full object-cover on the image to crop it, or object-contain to letterbox it. AspectRatio is a plain <div> that sets the CSS aspect-ratio property; in your own components, the Tailwind aspect-video or aspect-square utilities do the same.

Examples

Thumbnails

In a grid, the columns set the width and every thumbnail gets the same height.

<div className="grid w-full max-w-md grid-cols-3 gap-3">
  <figure className="flex flex-col gap-1.5">
    <AspectRatio ratio={4 / 3} className="rounded-md bg-surface-muted" />
    <figcaption className="text-xs text-text-muted">
      acme-login.co
    </figcaption>
  </figure>
  <figure className="flex flex-col gap-1.5">
    <AspectRatio ratio={4 / 3} className="rounded-md bg-surface-muted" />
    <figcaption className="text-xs text-text-muted">
      acme-support.net
    </figcaption>
  </figure>
  <figure className="flex flex-col gap-1.5">
    <AspectRatio ratio={4 / 3} className="rounded-md bg-surface-muted" />
    <figcaption className="text-xs text-text-muted">acrne.com</figcaption>
  </figure>
</div>

Accessibility

• The box has no semantics of its own. Give images an alt that says what they show, or alt="" when a caption next to them already does.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.