Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add aspect-ratio

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

An image or an embed that has no reserved space collapses to nothing and then shoves the page down when it loads. <x-aura::aspect-ratio> holds the shape from the first paint.

Basic Usage

16 / 9 
<div class="max-w-sm">
    <x-aura::aspect-ratio ratio="16/9" class="rounded-lg bg-aura-surface-100">
        <x-aura::center class="h-full text-sm text-aura-surface-600">16 / 9</x-aura::center>
    </x-aura::aspect-ratio>
</div>
<x-aura::aspect-ratio ratio="16/9">
    <iframe src="…" class="h-full w-full" title="Product tour"></iframe>
</x-aura::aspect-ratio>

Props

Prop Type Default Description
ratio string '16/9' Any CSS aspect-ratio value: 1/1, 4/3, 21/9, 3/2.

Notes

Give the child h-full w-full so it fills the reserved box; otherwise the box holds the space and the content sits in a corner of it.