aspect-ratio

Holds its children to a fixed width-to-height ratio.

16 / 9

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

Installation

php artisan ui:add aspect-ratio

1. Install dependencies

composer: gehrisandro/tailwind-merge-laravel

2. Copy the source into resources/views/components/ui/

resources/views/components/ui/aspect-ratio.blade.php

@props([
    'ratio' => '16/9',
])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'relative w-full',
        $attributes->get('class'),
    );
@endphp

{{-- The ratio is an inline style on purpose. aspect-[{{ '$ratio' }}] would be
     built from a runtime value, and Tailwind only compiles classes it can find
     by scanning source files, so that class would never exist. --}}
<div style="aspect-ratio: {{ $ratio }}"
    {{ $attributes->except('class')->merge(['class' => $classes]) }}>
    {{ $slot }}
</div>

Usage

<x-ui.aspect-ratio ratio="16/9" class="overflow-hidden rounded-lg">
    <img src="/photo.jpg" alt="" class="size-full object-cover" />
</x-ui.aspect-ratio>

No JavaScript and no tokens. Pass `ratio` as any CSS aspect-ratio value ("16/9", "1/1", "1.85"). Give the child `size-full object-cover` to fill the box.

Props

Every prop with its default. Pass any of them as attributes, using : to bind a PHP value.

@props([
    'ratio' => '16/9',
])