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

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

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

export function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9} className="w-full max-w-sm rounded-lg bg-muted">
      <img
        src="https://avatar.vercel.sh/shadcn1"
        alt="Photo"

        className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
      />
    </AspectRatio>
  )
}
```

Changed from the official source: Next.js Image (next/image) rendered as a plain img with the same src, alt, size and classes; fill as absolute inset-0 size-full.

## Installation

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

## Usage

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

```tsx showLineNumbers
<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>
```

## Square

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

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

export function AspectRatioSquare() {
  return (
    <AspectRatio
      ratio={1 / 1}
      className="w-full max-w-[12rem] rounded-lg bg-muted"
    >
      <img
        src="https://avatar.vercel.sh/shadcn1"
        alt="Photo"

        className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
      />
    </AspectRatio>
  )
}
```

Changed from the official source: Next.js Image (next/image) rendered as a plain img with the same src, alt, size and classes; fill as absolute inset-0 size-full.

## Portrait

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

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

export function AspectRatioPortrait() {
  return (
    <AspectRatio
      ratio={9 / 16}
      className="w-full max-w-[10rem] rounded-lg bg-muted"
    >
      <img
        src="https://avatar.vercel.sh/shadcn1"
        alt="Photo"

        className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
      />
    </AspectRatio>
  )
}
```

Changed from the official source: Next.js Image (next/image) rendered as a plain img with the same src, alt, size and classes; fill as absolute inset-0 size-full.

## RTL

To enable RTL support in shadcn/ui, see the [RTL configuration guide](https://ui.shadcn.com/docs/rtl).

```tsx title="src/components/examples/aspect-ratio/aspect-ratio-rtl.tsx"
"use client"

import * as React from "react"

import { AspectRatio } from "@/components/ui/aspect-ratio"
import {
  useTranslation,
  type Translations,
} from "@/components/language-selector"

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

export function AspectRatioRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <figure className="w-full max-w-sm" dir={dir}>
      <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
        <img
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"

          className="absolute inset-0 size-full rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
      <figcaption className="mt-2 text-center text-sm text-muted-foreground">
        {t.caption}
      </figcaption>
    </figure>
  )
}
```

Changed from the official source: Next.js Image (next/image) rendered as a plain img with the same src, alt, size and classes; fill as absolute inset-0 size-full.

## API Reference

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

### AspectRatio

The `AspectRatio` component displays content within a desired ratio.

| Prop        | Type     | Default | Required |
| ----------- | -------- | ------- | -------- |
| `ratio`     | `number` | -       | Yes      |
| `className` | `string` | -       | No       |

## Install what this page shows

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