Aspect Ratio

Import

import { AspectRatio } from "@retents/ui/aspect-ratio"

Usage Guidelines

When to use

• To enforce a consistent aspect ratio on media like images, videos, or maps (e.g., 16:9, 4:3, 1:1).
• When building responsive layouts where media must maintain proportions regardless of container width.

When NOT to use

• When the content has a natural size that should be preserved — let the browser handle it with standard img sizing.
• For non-media content that doesn't benefit from a fixed ratio — use normal CSS layout instead.

Preview

Usage

<AspectRatio ratio={16 / 9}>
  <img src="..." alt="..." className="rounded-md object-cover" />
</AspectRatio>

Source