# AspectRatio

Keeps media at a fixed width-to-height ratio, with its space held before it loads.

```ehtml Example
import { AspectRatio } from "@elements/ui/aspect-ratio";

<AspectRatio ratio={16 / 9}>
  <img src="./hero.jpg" alt="A mountain lake at dawn">
</AspectRatio>
```

## Parts

| Part | What it is |
|---|---|
| `.aspect-ratio` | The box. Usable without the template: style="aspect-ratio: 16 / 9". |

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `ratio` | `number` | `1` | Width divided by height: 16 / 9, 1, 9 / 16. |
| `fit` | `"cover" \| "contain" \| "fill"` | `"cover"` | object-fit for an image or video child. |
| `class` | `string` | `""` | Extra classes: rounded corners, a background. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Any other attributes: id, role, aria-\*, data-\*. |

## Slots

| Slot | Content |
|---|---|
| `default` | The media or content; each child fills the box. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-ratio` | the ratio | root |
| `data-fit` | `"cover" \| "contain" \| "fill"` | root |

## Accessibility

- No role of its own: the image inside carries the meaning through its alt text.
- The box holds its height before the media loads, so content below it never jumps.

## See also

- [Badge](badge): A small label for a status, a count or a category, built on the pill.
- [Card](card): A surface with a header, body and footer, built on the base card styles.
- [Alert](alert): A callout that draws attention to a message, with an icon, a title and an action.
- [Icon](icon): An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
- [Kbd](kbd): A keyboard key or shortcut, as text.
- [Separator](separator): A horizontal or vertical rule between content, semantic or decorative.