Aspect Ratio

Displays content inside a box with a consistent width-to-height ratio.

16:9 content area

Component Code

<april:aspect-ratio ratio="16 / 9" class="w-full max-w-2xl overflow-hidden rounded-lg border bg-muted">
    <div class="flex h-full items-center justify-center text-sm text-muted-foreground">
        16:9 content area
    </div>
</april:aspect-ratio>

<april:aspect-ratio ratio="16 / 9" class="w-full max-w-2xl overflow-hidden rounded-lg border bg-muted">
    <div class="flex h-full items-center justify-center text-sm text-muted-foreground">
        16:9 content area
    </div>
</april:aspect-ratio>

Pass a CSS aspect-ratio value through the ratio attribute. The component uses its default slot for the content it constrains.

<april:aspect-ratio ratio="16 / 9">
    <img src="/image.jpg" alt="A landscape" class="h-full w-full object-cover" />
</april:aspect-ratio>

Publishing Views

Use the following command to publish this view:

php artisan april:publish aspect-ratio

April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run:

php artisan april:publish --all

Review local overrides after an upgrade with `php artisan april:update --diff`.