# Aspect Ratio

> Fixed-ratio containers for media.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/aspect-ratio.json`

## Install

```tsx
import { AspectRatio } from "@aspyn-io/kit";
```

### 16:9 media container

```tsx
<AspectRatio ratio={16 / 9}>
  <img src={property.photo_url} alt="Property" className="h-full w-full rounded-md object-cover" />
</AspectRatio>
```

### Square (1:1)

Equal sides for avatars, thumbnails, and product tiles.

```tsx
<AspectRatio ratio={1}>
  <img src={avatar} alt="" className="h-full w-full rounded-md object-cover" />
</AspectRatio>
```

### Portrait (9:16)

Tall frame for phone screenshots and vertical video.

```tsx
<AspectRatio ratio={9 / 16}>
  <img src={story} alt="" className="h-full w-full rounded-md object-cover" />
</AspectRatio>
```

## Notes

- Prevents layout shift for images/maps/embeds of unknown intrinsic size.