Aspect Ratio

Displays content within a desired ratio, preventing layout shift.

Sunlit valley with winding river between green mountain ridges

Installation

CLI

Install the component using the StarUI CLI:

star add aspect-ratio

Examples

Content Framing

Same photo at four ratios shows how cropping changes with each format

Mountain lake reframed at different ratios

YouTube

Mountain lake reframed at different ratios

Ultrawide

Mountain lake reframed at different ratios

Instagram Post

Mountain lake reframed at different ratios

Portrait Photo

Video Embed

Non-image content in a 4:3 container. AspectRatio works with any children, not just images

Media Card Grid

Three source images with different native proportions, all normalized to 4:3 by AspectRatio

Architecture

Architecture

Modern design patterns

Culinary Arts

Culinary Arts

Seasonal tasting menus

Technology

Technology

Developer workspaces

Loading Placeholder

AspectRatio + Skeleton prevents layout shift while media loads

API Reference

Props

Prop Type Default Description
ratio float 16 / 9 Width-to-height ratio (e.g. 16/9, 4/3, 1)
cls str '' Additional CSS classes