---
title: "Aspect Ratio"
description: "Displays content within a desired ratio."
canonical_url: "https://vinicunca.dev/akar/components/aspect-ratio"
---
# Aspect Ratio

> Displays content within a desired ratio.

```vue [index.vue]
<script setup lang="ts">
import { AspectRatio } from 'akar'
import './styles.css'
</script>

<template>
  <div class="akar-demo akar-demo-AspectRatio">
    <div class="Container">
        <AspectRatio :ratio="16 / 9">
          <img
            class="Image"
            src="https://images.unsplash.com/photo-1498855926480-d98e83099315?w=300&dpr=2&q=80"
            alt="Landscape photograph by Tobias Tullius"
          >
        </AspectRatio>
      </div>
  </div>
</template>
```

```css [styles.css]
@import '../_colors/black-alpha.css';

@scope (.akar-demo-AspectRatio) {
.Container {
  width: 300px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px var(--black-a7);
}

.Image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
}
```

## Features

- Accepts any custom ratio.

## Installation

Install the component from your command line.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

## Anatomy

Import the component.

```vue
<script setup>
import { AspectRatio } from 'akar';
</script>

<template>
  <AspectRatio />
</template>
```

## API Reference

### Root

Contains the content you want to constrain to a given ratio.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `ratio` | `1` | `number` | The desired ratio. Eg: 16/9 |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `aspect` | `number` | Current aspect ratio (in %) |

[AspectRatio.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/AspectRatio/AspectRatio.vue)

---

- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/AspectRatio)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.