# Aspect Ratio

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { AspectRatio } from "@/components/starwind/aspect-ratio";
---

<AspectRatio ratio={16 / 9}>
  <img
    src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
    alt="Photo by Drew Beamer"
    class="rounded-md object-cover w-full h-full"
  />
</AspectRatio>
```
  </div>
  <div slot="react">
```tsx
import { AspectRatio } from "@/components/starwind/aspect-ratio";

export function Example() {
  return (
    <AspectRatio ratio={16 / 9}>
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        className="rounded-md object-cover w-full h-full"
      />
    </AspectRatio>
  );
}
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add aspect-ratio
```

## Usage

### 16:9 Ratio (Default Video)

```astro
---
import { AspectRatio } from "@/components/starwind/aspect-ratio";
---

<AspectRatio ratio={16 / 9}>
  <div class="flex items-center justify-center w-full h-full bg-muted rounded-md">
    <span class="text-sm text-muted-foreground">16:9 Aspect Ratio</span>
  </div>
</AspectRatio>
```

### 4:3 Ratio (Classic Photo)

```astro
---
import { AspectRatio } from "@/components/starwind/aspect-ratio";
---

<AspectRatio ratio={4 / 3}>
  <img
    src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=800&dpr=2&q=80"
    alt="Photo by Kari Shea"
    class="rounded-md object-cover w-full h-full"
  />
</AspectRatio>
```

### 1:1 Ratio (Square)

```astro
---
import { AspectRatio } from "@/components/starwind/aspect-ratio";
---

<AspectRatio ratio={1}>
  <img
    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=800&dpr=2&q=80"
    alt="Photo by Ayo Ogunseinde"
    class="rounded-md object-cover w-full h-full"
  />
</AspectRatio>
```

### 21:9 Ratio (Ultrawide)

```astro
---
import { AspectRatio } from "@/components/starwind/aspect-ratio";
---

<AspectRatio ratio={21 / 9}>
  <img
    src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&dpr=2&q=80"
    alt="Photo by Simon Berger"
    class="rounded-md object-cover w-full h-full"
  />
</AspectRatio>
```

### With Video

```astro
---
import { AspectRatio } from "@/components/starwind/aspect-ratio";
---

<AspectRatio ratio={16 / 9}>
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    class="w-full h-full rounded-md"
  ></iframe>
</AspectRatio>
```

## Framework Availability
Aspect Ratio is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### AspectRatio
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `as` | `keyof HTMLElementTagNameMap` | No | `"div"` | Wrapper prop | Selects the rendered element or component. |
| `ratio` | `number` | No | `1` | Wrapper prop | Sets the rendered width-to-height ratio. |
- Inherits div attributes.

## Changelog

### v1.1.0

- Added contract-generated Astro and React implementations while preserving the component's existing public API and styling.

### v1.0.3 

- Refactor tailwind variants functions into separate `variants.ts` file

### v1.0.0

- Initial release with starwind v1.10.0