Aspect Ratio
Constrains content to a fixed width-to-height ratio.
16 / 9
Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
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>