# Aspect ratio: Ratios

> `ratio` takes a number, a `"w/h"` string or a `"w:h"` string.

Example: https://hextaui.com/docs/aspect-ratio/examples/ratios
Component docs: https://hextaui.com/docs/aspect-ratio.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/aspect-ratio-ratios.json
```

This adds `components/examples/aspect-ratio/ratios.tsx` with the Aspect ratio component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/aspect-ratio/ratios.tsx"
import {
  AspectRatio,
  type AspectRatioValue,
} from "@/components/ui/aspect-ratio"

const ratios: { label: string; ratio: AspectRatioValue }[] = [
  { label: "16 / 9", ratio: 16 / 9 },
  { label: "1", ratio: 1 },
  { label: '"4/3"', ratio: "4/3" },
  { label: '"21:9"', ratio: "21:9" },
]

export function AspectRatioRatios() {
  return (
    <div className="grid w-full max-w-md grid-cols-2 gap-3">
      {ratios.map(({ label, ratio }) => (
        <div key={label} className="flex flex-col gap-1.5">
          <AspectRatio ratio={ratio} className="rounded-lg">
            <img src="/preview/landscape.svg" alt="Sunset over mountains" />
          </AspectRatio>
          <span className="font-mono text-xs text-muted-foreground">
            {label}
          </span>
        </div>
      ))}
    </div>
  )
}
```

## Props in this example

### AspectRatio

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `ratio` | `` number \| `${number}/${number}` \| `${number}:${number}` `` | `1` |  |

## More Aspect ratio examples

- [Slow load](https://hextaui.com/docs/aspect-ratio/examples/slow-load.md)
- [Broken image](https://hextaui.com/docs/aspect-ratio/examples/broken-image.md)
- [Overlay](https://hextaui.com/docs/aspect-ratio/examples/overlay.md)
- [Without placeholder](https://hextaui.com/docs/aspect-ratio/examples/without-placeholder.md)
- [Responsive](https://hextaui.com/docs/aspect-ratio/examples/responsive.md)
- [Inside a centered flex column](https://hextaui.com/docs/aspect-ratio/examples/flex-column.md)
- [Text content](https://hextaui.com/docs/aspect-ratio/examples/text-content.md)
- [As a figure](https://hextaui.com/docs/aspect-ratio/examples/figure.md)
- [Invalid ratio](https://hextaui.com/docs/aspect-ratio/examples/invalid-ratio.md)
- [Right to left](https://hextaui.com/docs/aspect-ratio/examples/rtl.md)