AspectRatio

composant

A box kept to a ratio, its picture or video covering it.

Aperçu

Clair

Code

<twig:AspectRatio ratio="16 / 9">
    <img src="/images/cover.jpg" alt="The hall, seen from the stage">
</twig:AspectRatio>

Sombre

Code

<twig:AspectRatio ratio="16 / 9">
    <img src="/images/cover.jpg" alt="The hall, seen from the stage">
</twig:AspectRatio>

Installation

php bin/console ux:install aspect-ratio --kit=github.com/parler-haut-interagir-librement/ux-kit

Propriétés

Propriété	Type	Par défaut	Description
`ratio`	`float\|int\|string`	`1`	The ratio of the width to the height, a number or a quotient such as "16 / 9".

Accessibility

The box adds nothing for screen readers: the picture inside keeps its own text alternative. A ratio that is not a number or a quotient is left out, for a square, so no other style can reach the attribute.

Fichiers à copier

templates/components/AspectRatio.html.twig

{#-
 # A box kept to a ratio, its picture or video filling it. The ratio is a number or a quotient such as "16 / 9";
 # anything else is left out for a square.
 #}
{%- props
    ## float|int|string The ratio of the width to the height, a number or a quotient such as "16 / 9".
    ratio = 1
-%}
{%- set _ratio = ratio is not iterable and (ratio ~ '') matches '/^\\d+(\\.\\d+)?(\\s*\\/\\s*\\d+(\\.\\d+)?)?$/' ? ratio : 1 -%}
<div data-slot="aspect-ratio"{{ attributes.defaults({class: 'isAspectRatio', style: '--phil-aspect-ratio: ' ~ _ratio}) }}>
{##- What fills the box, typically an image or a video. -#}
{%- block content %}{% endblock -%}
</div>