Component
AspectRatio
A box that keeps its shape — `video`, `photo`, `square`, `portrait`, `wide` or any ratio.
import { AspectRatio } from '@loidolt/theme-svelte';
Example
Notes
- Uses native
aspect-ratio, so the space is reserved before the image or video inside has loaded, and the page does not jump. - Images, videos and iframes placed directly inside fill the box.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
children | Snippet | — | |
class | string | — | |
ratio | AspectRatioName | number | string | 'video' | A named frame (video, photo, square, portrait, wide), a number, or '4 / 3'. |
ref bindable | HTMLDivElement | null | null |
Plus the attributes of HTMLAttributes<HTMLDivElement>, forwarded to the root element.