Astryx Design System

Usage

Maintains a fixed width-to-height ratio for its children, regardless of screen size. Use it for media containers like videos, images, thumbnails, or any content that needs consistent proportions.

ts
import {AspectRatio} from '@astryxdesign/core/AspectRatio'

Best practices

Guidance	Practices
Do	Express the ratio as a fraction like `16/9` or `4/3` for readability.
Do	Use for media that needs consistent proportions across screen sizes.
Don't	Use for general layout containers; use standard layout components instead.
Don't	Nest AspectRatio containers; one level is sufficient.

Examples

Common configurations, variations, and states.

AspectRatio — Circle Image

Circular container via shape="ellipse" with ratio={1}, ideal for avatars and profile images.

AspectRatio — Image Gallery

Grid of images with consistent 4:3 aspect ratios.

AspectRatio — Square Image

1:1 square aspect ratio, ideal for avatars and Instagram-style images.

AspectRatio — 16:9 Widescreen Image

16:9 widescreen aspect ratio wrapping an image.

AspectRatio — Loading Skeleton

Aspect ratio container with a skeleton loading placeholder.