# AspectRatio

> A layout primitive that locks its host to a fixed width-to-height ratio, clipping whatever content it wraps so the box keeps its shape regardless of the content's own intrinsic size.

```ts
import { AspectRatio } from "@sdxc/ui";
```

Fills its container's inline axis and clips any overflow. The ratio rides on
the `--ui-aspect-ratio` custom property, set per instance from the `ratio`
prop, so an ancestor's stylesheet can override it on its own.

## Examples

```tsx
<AspectRatio ratio="16 / 9">
	<img src={coverImageUrl} alt={coverImageAlt} />
</AspectRatio>
```

```tsx
<AspectRatio ratio={4 / 3} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `ratio?` | `Ratio` | Width-to-height ratio the host maintains. Defaults to a square. |

Also accepts everything in `TagProps<"div">`.