# Aspect Ratio

Keeps a box at a fixed width-to-height ratio as its width changes.

```tsx
import { ImageIcon } from "lucide-react"
import { AspectRatio } from "@zenoxai/ui/components/aspect-ratio"

function AspectRatioDemo() {
  return (
    <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

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

```tsx
<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.

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

function AspectRatioThumbnails() {
  return (
    <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

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

### AspectRatio

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| ratio (required) | `number` |  | Width divided by height, for example `16 / 9`. |