Aspect Ratio

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

Loading... 
<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 aspect ratio (e.g., `16 / 9`, `4 / 3`, `1 / 1`) #}
{# @prop style string Additional inline CSS styles #}
{# @block content The content to display within the aspect ratio container #}
{%- 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 aspect ratio (e.g., 16 / 9, 4 / 3, 1 / 1)
style string Additional inline CSS styles
Block Description
content The content to display within the aspect ratio container