Aspect Ratio

Displays content within a desired aspect ratio.

Examples

Default (16 / 9)

Gray by Drew Beamer 
<div class="w-[450px]">
  <c-aspect-ratio aspect-ratio-classes="bg-muted rounded-lg overflow-hidden">
    <img
      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
      alt="Gray by Drew Beamer"
      class="size-full rounded-lg object-cover"
    />
  </c-aspect-ratio>
</div>

Custom Ratio (1 / 1)

Gray by Drew Beamer 
<div class="w-[300px]">
  <c-aspect-ratio
    ratio="1"
    aspect-ratio-classes="bg-muted rounded-lg overflow-hidden"
  >
    <img
      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
      alt="Gray by Drew Beamer"
      class="size-full rounded-lg object-cover"
    />
  </c-aspect-ratio>
</div>

Video (16 / 9)

<div class="w-[450px]">
  <c-aspect-ratio aspect-ratio-classes="bg-muted rounded-lg overflow-hidden">
    <iframe
      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      class="size-full rounded-lg"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </c-aspect-ratio>
</div>

API Reference

AspectRatio

A container component that maintains a specific aspect ratio for its content.

Prop Type Default Description
ratio number 16/9 The desired aspect ratio (width/height). Common values: 16/9 (1.778), 4/3 (1.333), 1/1 (1), 21/9 (2.333)
aspect-ratio-classes string - Additional CSS classes to apply to the container

Usage

<!-- Default 16:9 aspect ratio -->
<c-aspect-ratio>
  <img src="..." alt="..." class="size-full object-cover" />
</c-aspect-ratio>

<!-- Square (1:1) aspect ratio -->
<c-aspect-ratio ratio="1">
  <img src="..." alt="..." class="size-full object-cover" />
</c-aspect-ratio>

<!-- Custom 21:9 aspect ratio -->
<c-aspect-ratio ratio="2.333">
  <video src="..." class="size-full"></video>
</c-aspect-ratio>

<!-- With custom classes -->
<c-aspect-ratio aspect-ratio-classes="bg-muted rounded-lg">
  <img src="..." alt="..." class="size-full object-cover rounded-lg" />
</c-aspect-ratio>