Aspect Ratio

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

<twig:AspectRatio ratio="16 / 9" class="max-h-80">
    <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

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

That's it!

Install the following Composer dependencies:

composer require twig/extra-bundle

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>

Happy coding!

Usage

<twig:AspectRatio ratio="16 / 9" class="max-h-80">
    <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