# AspectRatio

Container that maintains a specific aspect ratio for its content

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import { AspectRatio } from "@databricks/appkit-ui/react"

export default function AspectRatioExample() {
  return (
    <AspectRatio ratio={16 / 9} className="bg-muted">
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        className="h-full w-full rounded-md object-cover"
      />
    </AspectRatio>
  )
}

```

## AspectRatio[​](#aspectratio-1 "Direct link to AspectRatio")

Container that maintains a specific aspect ratio for its content

**Source:** [`packages/appkit-ui/src/react/ui/aspect-ratio.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/aspect-ratio.tsx)

### Props[​](#props "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `ratio`   | `number`  |          | -       | -           |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { AspectRatio } from '@databricks/appkit-ui';

<AspectRatio /* props */ />

```