Documentation

AspectRatio

Maintain consistent aspect ratios for responsive images and media.

Installation

pnpm add @rouf-dev/pantheon-ui

Usage

import { AspectRatio } from "@rouf-dev/pantheon-ui";

<AspectRatio ratio={16 / 9}>
  <img src="/image.jpg" alt="Description" className="object-cover" />
</AspectRatio>

Examples

16:9 Ratio

16:9 Aspect Ratio

4:3 Ratio

4:3 Aspect Ratio

1:1 (Square)

1:1 Square