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{XDSAspectRatio}from'@xds/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 — 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.