# Aspect Ratio

Displays content within a fixed width-to-height ratio.

Source: [aspect-ratio.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/aspect-ratio.tsx)

```tsx
import { ImageIcon } from "lucide-react";

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

export default function AspectRatioWidescreen() {
  return (
    <AspectRatio
      ratio={16 / 9}
      className="w-full max-w-md overflow-hidden rounded-lg bg-linear-to-br from-info-muted via-layer-2 to-success-muted"
    >
      <div className="absolute inset-0 flex items-center justify-center text-icon-muted">
        <ImageIcon className="size-8" />
      </div>
    </AspectRatio>
  );
}
```

## Installation

Add the registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/aspect-ratio
```

## Usage

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

export function Cover() {
  return (
    <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg">
      <img src="/cover.jpg" alt="The team at the 2026 offsite" className="size-full object-cover" />
    </AspectRatio>
  );
}
```

It fills the width of its container and sets its height from `ratio`.

## Examples

### Square

```tsx
import { ImageIcon } from "lucide-react";

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

export default function AspectRatioSquare() {
  return (
    <AspectRatio
      ratio={1}
      className="w-full max-w-48 overflow-hidden rounded-lg bg-linear-to-br from-warning-muted via-layer-2 to-destructive-muted"
    >
      <div className="absolute inset-0 flex items-center justify-center text-icon-muted">
        <ImageIcon className="size-8" />
      </div>
    </AspectRatio>
  );
}
```

## Props

| Part | Extends |
| --- | --- |
| `AspectRatio` | `<div>` |

### AspectRatio

| Prop    | Type     | Description |
| ------- | -------- | ----------- |
| `ratio` | `number` |             |