Aspect Ratio
Constrains content to a fixed width-to-height ratio.
16 / 9
<script lang="ts">
import { AspectRatio } from "$lib/components/ui/aspect-ratio";
</script>
<div class="w-full max-w-sm">
<AspectRatio ratio={16 / 9}>
<div
class="flex size-full items-center justify-center rounded-3xl bg-(--text)/8 text-sm tracking-[-0.39px] text-(--text)/56"
>
16 / 9
</div>
</AspectRatio>
</div>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the aspect-ratio source from the registry into $lib/components/ui/aspect-ratio.
Usage
<script lang="ts">
import { AspectRatio } from '$lib/components/ui/aspect-ratio';
</script>
<AspectRatio ratio={16 / 9}>
<img src="/cover.jpg" alt="Cover" class="size-full rounded-3xl object-cover" />
</AspectRatio>