Components

Aspect Ratio

Displays content within a desired ratio.

php artisan blatui:add aspect-ratio

16 / 9

<div class="w-[450px]">
    <x-ui.aspect-ratio ratio="16 / 9" class="bg-muted rounded-lg">
        <div class="flex size-full items-center justify-center rounded-lg text-muted-foreground text-sm">
            16 / 9
        </div>
    </x-ui.aspect-ratio>
</div>

Image

<div class="w-[450px]">
    <x-ui.aspect-ratio ratio="16 / 9">
        <img
            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
            alt="Drew Beamer's gradient artwork"
            class="size-full rounded-lg object-cover"
        />
    </x-ui.aspect-ratio>
</div>

Ratios

1/1

4/3

3/2

16/9

21/9

3/4

9/16

{{-- The full set of common aspect ratios, landscape through portrait. --}}
<div class="grid w-full max-w-3xl grid-cols-2 items-start gap-4 sm:grid-cols-4">
    @foreach (['1 / 1', '4 / 3', '3 / 2', '16 / 9', '21 / 9', '3 / 4', '9 / 16'] as $r)
        <div>
            <x-ui.aspect-ratio ratio="{{ $r }}" class="bg-muted rounded-lg">
                <div class="text-muted-foreground flex size-full items-center justify-center text-sm">{{ str_replace(' ', '', $r) }}</div>
            </x-ui.aspect-ratio>
        </div>
    @endforeach
</div>

API Reference

Props, slots and exposed methods for <x-ui.aspect-ratio>.

Props

Prop	Type	Default	Description
`ratio`	`string`	`'1 / 1'`	The desired width-to-height ratio as a CSS aspect-ratio value, e.g. "16 / 9" or "4 / 3". The container keeps this ratio at any width.

Slots

Slot	Description
`default`	The content constrained to the ratio (e.g. an <img>, <iframe>, or <video>). The wrapper is relatively positioned, so children can be absolutely positioned to fill it.