AspectRatio

A simple component for maintaining aspect ratios. Perfect for images, videos, or any content that needs to preserve its proportions.

Installation

npx @zizigy/capsule add AspectRatio

Usage

Basic Aspect Ratio

<capsule-aspect-ratio ratio="16/9">
  <img
    src="https://picsum.photos/800/450"
    alt="Image"
  />
</capsule-aspect-ratio>

Common Ratios

16:9 (Widescreen)

4:3 (Classic)

1:1 (Square)

21:9 (Ultrawide)

<!-- 16:9 -->
<capsule-aspect-ratio ratio="16/9">
  <img
    src="https://picsum.photos/800/450"
    alt="Image"
  />
</capsule-aspect-ratio>

<!-- 4:3 -->
<capsule-aspect-ratio ratio="4/3">
  <img
    src="https://picsum.photos/800/600"
    alt="Image"
  />
</capsule-aspect-ratio>

<!-- 1:1 (Square) -->
<capsule-aspect-ratio ratio="1/1">
  <img
    src="https://picsum.photos/600/600"
    alt="Image"
  />
</capsule-aspect-ratio>

Using Colon Format

You can also use colon format instead of slash:

<capsule-aspect-ratio ratio="16:9">
  <img
    src="https://picsum.photos/800/450"
    alt="Image"
  />
</capsule-aspect-ratio>

With Video

<capsule-aspect-ratio ratio="16/9">
  <video controls>
    <source
      src="video.mp4"
      type="video/mp4"
    />
  </video>
</capsule-aspect-ratio>

With Custom Content

<capsule-aspect-ratio ratio="3/2">
  <div style="background: linear-gradient(...);"> Custom content </div>
</capsule-aspect-ratio>

Portrait Images

<capsule-aspect-ratio ratio="3/4">
  <img
    src="https://picsum.photos/300/400"
    alt="Portrait"
  />
</capsule-aspect-ratio>

API

Properties

Property	Type	Default	Description
ratio	string	''	Aspect ratio value (e.g., '16/9', '16:9', '4/3', '1')

Format

The ratio attribute accepts values in these formats:

• "16/9" - Slash format (recommended)
• "16:9" - Colon format (also supported)
• "1" - Single number (treated as 1/1)

Notes

• Child elements automatically fill the container
• Use object-fit CSS property on images/videos for proper sizing (default is cover)
• The component uses CSS aspect-ratio property under the hood