AspectRatio

Displays content within a desired aspect ratio. Built on Radix UI.

Installation

# Install @opencosmos/ui to use AspectRatio
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

ratio— Aspect ratio (e.g., 16/9, 4/3, 1/1)

Usage

Import

import { AspectRatio } from '@opencosmos/ui';

Example

<AspectRatio>
  Content
</AspectRatio>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
ratio	text	"16/9"	Aspect ratio (e.g., 16/9, 4/3, 1/1)

Code Examples

Image Container

Maintain aspect ratio for images

import { AspectRatio } from "@opencosmos/ui"

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