---
type: doc
title: Aspect Ratio
description: Displays content within a desired ratio.
---

```astro live props={{ name: 'aspect-ratio' }}
---
import { AspectRatio } from "@/components/ui/aspect-ratio"
---

<AspectRatio
  ratio={16 / 9}
  class="bg-muted w-full max-w-xl overflow-hidden rounded-lg"
>
  <div class="text-muted-foreground flex h-full items-center justify-center text-sm font-medium">
    16:9
  </div>
</AspectRatio>
```

## Installation

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

## Usage

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

<AspectRatio ratio={16 / 9}>
  <img src="/image.jpg" alt="Landscape" class="size-full object-cover" />
</AspectRatio>
```

## Examples

### Common Ratios

The ratio is width divided by height.

```astro live
---
import { AspectRatio } from "@/components/ui/aspect-ratio"
---

<div class="grid w-full max-w-2xl grid-cols-2 items-start gap-4 sm:grid-cols-4">
  <div>
    <AspectRatio ratio={1} class="bg-muted rounded-lg">
      <span class="text-muted-foreground flex size-full items-center justify-center text-sm">
        1:1
      </span>
    </AspectRatio>
  </div>
  <div>
    <AspectRatio ratio={4 / 3} class="bg-muted rounded-lg">
      <span class="text-muted-foreground flex size-full items-center justify-center text-sm">
        4:3
      </span>
    </AspectRatio>
  </div>
  <div>
    <AspectRatio ratio={16 / 9} class="bg-muted rounded-lg">
      <span class="text-muted-foreground flex size-full items-center justify-center text-sm">
        16:9
      </span>
    </AspectRatio>
  </div>
  <div>
    <AspectRatio ratio={9 / 16} class="bg-muted max-w-24 rounded-lg">
      <span class="text-muted-foreground flex size-full items-center justify-center text-sm">
        9:16
      </span>
    </AspectRatio>
  </div>
</div>
```

### Image

The child controls its own crop. Use `object-cover` to fill the available area.

```astro live
---
import { AspectRatio } from "@/components/ui/aspect-ratio"
---

<AspectRatio
  ratio={21 / 9}
  class="bg-muted w-full max-w-2xl overflow-hidden rounded-xl"
>
  <img
    src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80"
    alt="Mountain landscape"
    class="size-full object-cover dark:brightness-75"
  />
</AspectRatio>
```

## API Reference

| Prop    | Type     | Default  | Description                                |
| ------- | -------- | -------- | ------------------------------------------ |
| `ratio` | `number` | required | Width divided by height, such as `16 / 9`. |

`class`, `style`, and other div attributes are forwarded. String and object style values are merged with the internal ratio variable.

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/aspect-ratio) for the component source.