Rapports

Utilisez des pseudo-éléments générés pour qu'un élément conserve le rapport d'aspect de votre choix. Parfait pour gérer de manière réactive les intégrations de vidéos ou de diaporamas en fonction de la largeur du parent.

Sur cette page

À propos de

Utilisez l'assistant de ratio pour gérer les ratios d'aspect du contenu externe comme <iframe>s, <embed>s, <video>s et <object>s. Ces assistants peuvent également être utilisés sur n'importe quel élément enfant HTML standard (par exemple, a <div>ou <img>). Les styles sont appliqués de la .ratioclasse parent directement à l'enfant.

Les rapports d'aspect sont déclarés dans une carte Sass et inclus dans chaque classe via une variable CSS, qui permet également des rapports d'aspect personnalisés .

Conseil de pro ! Vous n'avez pas besoin frameborder="0"de votre <iframe>s car nous le remplaçons pour vous dans Reboot .

Exemple

Enveloppez toute incorporation, comme un <iframe>, dans un élément parent avec .ratioet une classe de rapport d'aspect. L'élément enfant immédiat est dimensionné automatiquement grâce à notre sélecteur universel .ratio > *.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Rapports d'aspect

Les rapports d'aspect peuvent être personnalisés avec des classes de modificateurs. Par défaut, les classes de ratio suivantes sont fournies :

1x1

4x3

16x9

21x9

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

Ratios personnalisés

Chaque .ratio-*classe inclut une propriété personnalisée CSS (ou variable CSS) dans le sélecteur. Vous pouvez remplacer cette variable CSS pour créer des proportions personnalisées à la volée avec quelques calculs rapides de votre part.

Par exemple, pour créer un format d'image 2x1, réglez --bs-aspect-ratio: 50%sur le .ratio.

2x1

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

Cette variable CSS facilite la modification du rapport d'aspect entre les points d'arrêt. Ce qui suit est 4x3 pour commencer, mais passe à un 2x1 personnalisé au point d'arrêt moyen.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3, puis 2x1

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Sass carte

Dans _variables.scss, vous pouvez modifier les proportions que vous souhaitez utiliser. Voici notre $ratio-aspect-ratioscarte par défaut. Modifiez la carte à votre guise et recompilez vos Sass pour les utiliser.

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