Aspect Ratio

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

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>
  );
}

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

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>
    </>
  );
}

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

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>
    </>
  );
}

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

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>
    </>
  );
}

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

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>
    </>
  );
}

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

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>
    </>
  );
}