# AspectRatio

## Overview

A container that maintains a fixed width-to-height ratio regardless of the available space. Prevents layout shifts when loading images, videos, or charts. Use when content must always fill a specific shape.

---

## When to Use

- Image thumbnails or banners that must maintain 16:9, 4:3, or 1:1 ratios
- Video embeds
- Map or chart containers with fixed proportions

---

## Props

| Prop        | Type     | Default | Description                                      |
| ----------- | -------- | ------- | ------------------------------------------------ |
| `ratio`     | `number` | `1`     | Width/height ratio (e.g., `16/9` for widescreen) |
| `className` | `string` | —       | Applied to the container                         |

---

## Examples

### Image with 16:9 Ratio

```tsx
import { AspectRatio } from 'xertica-ui/ui';

<div className="w-full max-w-lg">
  <AspectRatio ratio={16 / 9}>
    <img
      src="https://example.com/hero.jpg"
      alt="Hero"
      className="rounded-md object-cover w-full h-full"
    />
  </AspectRatio>
</div>;
```

### Square Avatar Banner

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

---

## AI Rules

- The outer container must have a defined width — `AspectRatio` sets the height automatically based on `ratio`.
- The child content must use `w-full h-full` to fill the ratio container.
- Never use `<AspectRatio>` without an explicit outer width constraint.