Aspect Ratio
Locks child content to a fixed width-to-height ratio via bits-ui AspectRatio. Pure layout — no motion, no state. Pairs naturally with images, video, and embedded iframes.
Usage
16 : 9
aspect-ratio.svelte
<script lang="ts">
import { AspectRatio } from '$lib/components/ui/aspect-ratio';
</script>
<AspectRatio ratio={16 / 9} class="bg-muted rounded-md">
<img src="/cover.jpg" alt="Cover" class="h-full w-full rounded-md object-cover" />
</AspectRatio>Common ratios
1 : 1
4 : 3
16 : 9
21 : 9
aspect-ratio.svelte
<script lang="ts">
import { AspectRatio as AspectRatioPrimitive } from 'bits-ui';
let { ref = $bindable(null), ...restProps }: AspectRatioPrimitive.RootProps = $props();
</script>
<AspectRatioPrimitive.Root bind:ref data-slot="aspect-ratio" {...restProps} />
API reference
Inherits bits-ui AspectRatio.Root props.
| Prop | Type | Default | Description |
|---|---|---|---|
number | 1 | Width / height ratio. Pass numeric expressions like 16 / 9 or 4 / 3 — numbers, not strings. | |
string | — | Merged onto the wrapper via tailwind-merge. | |
HTMLElement | null | null | Two-way-bindable element reference. |