Aspect Ratio @astryx-svelte/core v0.3.0 · AspectRatio
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
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. |
| Do | Use fit="cover" for images and video so the component sizes the child; the child should not repeat width/height/objectFit styles. |
| 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.