Aspect Ratio
Preserve a predictable shape for media and responsive content.
Use AspectRatio when content should keep a consistent proportion as its container changes size.
Built on Radix UI Aspect RatioUpstream API
Previewing the image at 16:9.
Import
import { AspectRatio } from "@workshop1/ui/components/aspect-ratio"Accessibility
The primitive only controls layout. Give the content its own accessible name and meaningful alternative text when it represents media.
Best practices
- Choose a ratio that matches the source content.
- Keep overflow hidden when media should stay inside the frame.
- Use a regular container when the content has no fixed proportion.