Aspect Ratio

<x-slate::aspect-ratio ratio="16:9" class="overflow-hidden rounded-lg bg-muted">
    <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        class="absolute inset-0 size-full object-cover"
    />
</x-slate::aspect-ratio>

<div class="grid gap-4 sm:grid-cols-3">
    <div class="space-y-2">
        <p class="text-sm text-muted-foreground">1:1</p>
        <x-slate::aspect-ratio ratio="1:1" class="rounded-md bg-muted" />
    </div>
    <div class="space-y-2">
        <p class="text-sm text-muted-foreground">4:3</p>
        <x-slate::aspect-ratio ratio="4:3" class="rounded-md bg-muted" />
    </div>
    <div class="space-y-2">
        <p class="text-sm text-muted-foreground">21:9</p>
        <x-slate::aspect-ratio ratio="21:9" class="rounded-md bg-muted" />
    </div>
</div>