# 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>
  <div slot="vue">
```vue
<script setup lang="ts">
import { AspectRatio } from "@/components/starwind/aspect-ratio";
</script>

<template>
  <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>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add aspect-ratio --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add aspect-ratio --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add aspect-ratio --framework vue
```
</DocsTabsContent>
</DocsTabs>

## Usage

<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>
  <div slot="vue">
```vue
<script setup lang="ts">
import { AspectRatio } from "@/components/starwind/aspect-ratio";
</script>

<template>
  <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>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## 16:9 Ratio (Default Video)

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
import { AspectRatio } from "@/components/starwind/aspect-ratio";

export function Example() {
  return (
    <>
      <AspectRatio ratio={16 / 9}>
        <div className="flex items-center justify-center w-full h-full bg-muted rounded-md">
          <span className="text-sm text-muted-foreground">16:9 Aspect Ratio</span>
        </div>
      </AspectRatio>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { AspectRatio } from "@/components/starwind/aspect-ratio";
</script>

<template>
  <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>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## 4:3 Ratio (Classic Photo)

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
import { AspectRatio } from "@/components/starwind/aspect-ratio";

export function Example() {
  return (
    <>
      <AspectRatio ratio={4 / 3}>
        <img
          src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=800&dpr=2&q=80"
          alt="Photo by Kari Shea"
          className="rounded-md object-cover w-full h-full"
        />
      </AspectRatio>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { AspectRatio } from "@/components/starwind/aspect-ratio";
</script>

<template>
  <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>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## 1:1 Ratio (Square)

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
import { AspectRatio } from "@/components/starwind/aspect-ratio";

export function Example() {
  return (
    <>
      <AspectRatio ratio={1}>
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=800&dpr=2&q=80"
          alt="Photo by Ayo Ogunseinde"
          className="rounded-md object-cover w-full h-full"
        />
      </AspectRatio>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { AspectRatio } from "@/components/starwind/aspect-ratio";
</script>

<template>
  <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>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## 21:9 Ratio (Ultrawide)

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
import { AspectRatio } from "@/components/starwind/aspect-ratio";

export function Example() {
  return (
    <>
      <AspectRatio ratio={21 / 9}>
        <img
          src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&dpr=2&q=80"
          alt="Photo by Simon Berger"
          className="rounded-md object-cover w-full h-full"
        />
      </AspectRatio>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { AspectRatio } from "@/components/starwind/aspect-ratio";
</script>

<template>
  <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>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## With Video

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
import { AspectRatio } from "@/components/starwind/aspect-ratio";

export function Example() {
  return (
    <>
      <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"
          className="w-full h-full rounded-md"
        ></iframe>
      </AspectRatio>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { AspectRatio } from "@/components/starwind/aspect-ratio";
</script>

<template>
  <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>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## 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