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

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/aspect-ratio/aspect-ratio-demo.astro"
---
import { AspectRatio } from "@/components/ui/aspect-ratio"
---

<AspectRatio ratio={16 / 9} class="bg-muted w-full max-w-sm rounded-lg">
  <img
    src="https://avatar.vercel.sh/shadcn1"
    alt="Photo"
    class="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
  />
</AspectRatio>
```

## Installation

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

## Usage

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

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

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

## Square

A square aspect ratio using `ratio={1 / 1}`.

```astro title="src/components/examples/aspect-ratio/aspect-ratio-square.astro"
---
import { AspectRatio } from "@/components/ui/aspect-ratio"
---

<AspectRatio ratio={1 / 1} class="bg-muted w-full max-w-[12rem] rounded-lg">
  <img
    src="https://avatar.vercel.sh/shadcn1"
    alt="Photo"
    class="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
  />
</AspectRatio>
```

## Portrait

A portrait aspect ratio using `ratio={9 / 16}`.

```astro title="src/components/examples/aspect-ratio/aspect-ratio-portrait.astro"
---
import { AspectRatio } from "@/components/ui/aspect-ratio"
---

<AspectRatio ratio={9 / 16} class="bg-muted w-full max-w-[10rem] rounded-lg">
  <img
    src="https://avatar.vercel.sh/shadcn1"
    alt="Photo"
    class="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
  />
</AspectRatio>
```

## RTL

```astro title="src/components/examples/aspect-ratio/aspect-ratio-rtl.astro"
---
import { AspectRatio } from "@/components/ui/aspect-ratio"

const translations = {
  en: {
    dir: "ltr",
    values: {
      caption: "Beautiful landscape",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      caption: "منظر طبيعي جميل",
    },
  },
  he: {
    dir: "rtl",
    values: {
      caption: "נוף יפה",
    },
  },
} as const

const { dir, values: t } = translations.ar
---

<figure class="w-full max-w-sm" dir={dir}>
  <AspectRatio ratio={16 / 9} class="bg-muted rounded-lg">
    <img
      src="https://avatar.vercel.sh/shadcn1"
      alt="Photo"
      class="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
    />
  </AspectRatio>
  <figcaption class="text-muted-foreground mt-2 text-center text-sm">
    {t.caption}
  </figcaption>
</figure>
```

## API Reference

Source: [`src/components/ui/aspect-ratio`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/aspect-ratio)

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

## Install what this page shows

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