> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/radix-ui/primitives/llms.txt
> Use this file to discover all available pages before exploring further.

# Aspect Ratio

> Displays content within a desired ratio.

## Overview

Aspect Ratio displays content within a desired aspect ratio by automatically computing height based on the provided ratio and width.

## Features

* Ensures content maintains a specific aspect ratio
* Accepts any custom ratio

## Installation

```bash theme={null}
npm install @radix-ui/react-aspect-ratio
```

## Anatomy

```tsx theme={null}
import * as AspectRatio from '@radix-ui/react-aspect-ratio';

export default () => (
  <AspectRatio.Root>
    <img src="..." alt="..." />
  </AspectRatio.Root>
)
```

## API Reference

### Root

Contains the content constrained to the given ratio.

<ParamField path="ratio" type="number" default="1">
  The desired ratio. For example, `16/9` for a 16:9 aspect ratio.
</ParamField>

## Examples

### Image with 16:9 Ratio

<CodeGroup>
  ```tsx 16:9 Ratio theme={null}
  import * as AspectRatio from '@radix-ui/react-aspect-ratio';

  export default () => (
    <div style={{ width: 300 }}>
      <AspectRatio.Root ratio={16 / 9}>
        <img
          src="https://images.unsplash.com/photo-1535025183041-0991a977e25b"
          alt="Landscape"
          style={{
            objectFit: 'cover',
            width: '100%',
            height: '100%',
          }}
        />
      </AspectRatio.Root>
    </div>
  );
  ```
</CodeGroup>

### Square Ratio

<CodeGroup>
  ```tsx Square theme={null}
  import * as AspectRatio from '@radix-ui/react-aspect-ratio';

  export default () => (
    <div style={{ width: 300 }}>
      <AspectRatio.Root ratio={1}>
        <img
          src="https://images.unsplash.com/photo-1535025183041-0991a977e25b"
          alt="Square image"
          style={{
            objectFit: 'cover',
            width: '100%',
            height: '100%',
          }}
        />
      </AspectRatio.Root>
    </div>
  );
  ```
</CodeGroup>

### Video with 4:3 Ratio

<CodeGroup>
  ```tsx Video theme={null}
  import * as AspectRatio from '@radix-ui/react-aspect-ratio';

  export default () => (
    <div style={{ width: 500 }}>
      <AspectRatio.Root ratio={4 / 3}>
        <video
          src="https://example.com/video.mp4"
          controls
          style={{
            width: '100%',
            height: '100%',
          }}
        />
      </AspectRatio.Root>
    </div>
  );
  ```
</CodeGroup>

## Use Cases

* Maintaining consistent image ratios in responsive layouts
* Embedding videos that maintain their aspect ratio
* Creating placeholder containers with specific ratios
* Building image galleries with consistent dimensions