Aides

Ratio

La classe .ratio garde un élément à un rapport largeur/hauteur constant, quelle que soit la largeur disponible. Idéale pour les vidéos, les cartes ou tout bloc qui doit rester proportionné.

Posez .ratio et une classe de proportion sur le conteneur : son enfant direct occupe tout l’espace réservé. Le ratio se calcule à partir de la largeur, la hauteur suit. Cauri ne charge aucune vidéo : l’exemple remplace le lecteur par un bloc coloré, comme vous le feriez avant d’intégrer votre lecteur.

Vidéo explicative en 16:9#

Un bloc coloré tient la place du lecteur de la vidéo de présentation d’un compte épargne.

Vidéo : ouvrir un compte épargne

<div class="ratio ratio-16x9">
  <div class="text-bg-primary d-flex align-items-center justify-content-center">
    Vidéo : ouvrir un compte épargne
  </div>
</div>

Les quatre proportions#

1x1, 4x3, 16x9 et 21x9. Les blocs ci-dessous sont limités en largeur pour les comparer.

1x1

4x3

16x9

21x9

<div class="row g-3">
  <div class="col-6"><div class="ratio ratio-1x1"><div class="text-bg-secondary d-flex align-items-center justify-content-center">1x1</div></div></div>
  <div class="col-6"><div class="ratio ratio-4x3"><div class="text-bg-secondary d-flex align-items-center justify-content-center">4x3</div></div></div>
  <div class="col-6"><div class="ratio ratio-16x9"><div class="text-bg-secondary d-flex align-items-center justify-content-center">16x9</div></div></div>
  <div class="col-6"><div class="ratio ratio-21x9"><div class="text-bg-secondary d-flex align-items-center justify-content-center">21x9</div></div></div>
</div>

Image de bannière avec ratio#

Un visuel SVG en ligne dans un cadre 21:9, pour une bannière de campagne qui garde sa proportion.

<div class="ratio ratio-21x9">
  <svg viewBox="0 0 210 90" role="img" aria-label="Bannière de la campagne épargne" preserveAspectRatio="xMidYMid slice">
    <rect width="210" height="90" fill="#2B62AA"/>
    <circle cx="170" cy="45" r="30" fill="#387A1B"/>
    <text x="20" y="52" fill="#fff" font-size="14" font-family="sans-serif">Épargne jeunes</text>
  </svg>
</div>

Ratio personnalisé#

Définissez --bs-aspect-ratio pour une proportion sur mesure, ici 2:1 (50 %). Vous pouvez la changer par point de rupture avec votre propre CSS.

Visuel 2:1

<div class="ratio" style="--bs-aspect-ratio: 50%">
  <div class="text-bg-info d-flex align-items-center justify-content-center">Visuel 2:1</div>
</div>

Ajouter des ratios en Sass#

La carte $aspect-ratios génère une classe .ratio-{clé} par entrée. Ajoutez-y vos proportions avant l’import de Cauri.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%),
  "2x1": 50%
);

Classes et variables

Classes et variables
Élément	Valeur	Rôle
`.ratio`	—	Conteneur en `position: relative`, pleine largeur ; l’enfant direct est étiré sur tout l’espace.
`.ratio-1x1`	`100%`	Carré.
`.ratio-4x3`	`75%`	Format classique.
`.ratio-16x9`	`56.25%`	Écran large, vidéos.
`.ratio-21x9`	`42.857%`	Bannière panoramique.
`--bs-aspect-ratio`	selon la classe	Hauteur en pourcentage de la largeur.
`$aspect-ratios`	carte Sass	Une classe `.ratio-{clé}` est générée par entrée.

Bonnes pratiques

À faire

Mettez un seul enfant direct dans .ratio : il est étiré à 100 % de largeur et de hauteur.
Donnez un titre ou une description à toute vidéo ou tout visuel intégré (title, aria-label).

À éviter

Ne mettez pas plusieurs enfants frères dans .ratio : ils se superposeraient.
N’ajoutez pas de marge ni de padding à l’enfant direct : il est positionné de façon absolue.

Accessibilité

Un visuel porteur de sens a une alternative textuelle : aria-label sur le SVG, alt sur l’image.
Une vidéo explicative doit avoir une transcription ou des sous-titres.