Aspect Ratio

A container that maintains a specific width-to-height ratio for its content.

<twig:AspectRatio ratio="1 / 1" class="max-h-90">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
        alt="Bukchon Hanok Village by Y K"
        class="h-full w-full rounded-md object-cover"
    />
    <a href="https://unsplash.com/fr/photos/rue-vide-entre-les-maisons--e6Xu27_T50" class="hover:underline">Bukchon Hanok Village by Y K</a>
</twig:AspectRatio>

Installation

Ensure the Symfony UX Toolkit is installed in your Symfony app:

$ composer require --dev symfony/ux-toolkit

Then, run the following command to install the component and its dependencies:

$ bin/console ux:install aspect-ratio --kit shadcn

The UX Toolkit is not mandatory to install a component. You can install it manually by following the next steps:

Copy the following file(s) into your Symfony app:

templates/components/AspectRatio.html.twig

{# @prop ratio string The ratio to use, example `3 / 4`, `16 / 9` #}
{# @prop style string Additional CSS styles to apply #}
{# @block content The default block #}
{%- props ratio, style = '' -%}
<div
    style="aspect-ratio: {{ ratio }}; {{ style }}"
    {{ attributes.without('style') }}
>
    {%- block content %}{% endblock -%}
</div>

If necessary, install the following Composer dependencies:
```
$ composer require twig/extra-bundle
```
And the most important, enjoy!

Usage

<twig:AspectRatio ratio="1 / 1" class="max-h-90">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
        alt="Bukchon Hanok Village by Y K"
        class="h-full w-full rounded-md object-cover"
    />
    <a href="https://unsplash.com/fr/photos/rue-vide-entre-les-maisons--e6Xu27_T50" class="hover:underline">Bukchon Hanok Village by Y K</a>
</twig:AspectRatio>

Examples

With 1 / 1 aspect ratio

<twig:AspectRatio ratio="1 / 1" class="max-h-90">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
        alt="Bukchon Hanok Village by Y K"
        class="h-full w-full rounded-md object-cover"
    />
    <a href="https://unsplash.com/fr/photos/rue-vide-entre-les-maisons--e6Xu27_T50" class="hover:underline">Bukchon Hanok Village by Y K</a>
</twig:AspectRatio>

With 2 / 3 aspect ratio

<twig:AspectRatio ratio="3 / 2" class="max-h-90">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
        alt="Bukchon Hanok Village by Y K"
        class="h-full w-full rounded-md object-cover"
    />
    <a href="https://unsplash.com/fr/photos/rue-vide-entre-les-maisons--e6Xu27_T50" class="hover:underline">Bukchon Hanok Village by Y K</a>
</twig:AspectRatio>

With 16 / 9 aspect ratio

<twig:AspectRatio ratio="16 / 9" class="max-h-90">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
        alt="Bukchon Hanok Village by Y K"
        class="h-full w-full rounded-md object-cover"
    />
    <a href="https://unsplash.com/fr/photos/rue-vide-entre-les-maisons--e6Xu27_T50" class="hover:underline">Bukchon Hanok Village by Y K</a>
</twig:AspectRatio>

API Reference

AspectRatio

Prop	Type	Description
`ratio`	`string`	The ratio to use, example `3 / 4`, `16 / 9`
`style`	`string`	Additional CSS styles to apply

Block	Description
`content`	The default block