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.
À 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 .ratio
classe 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 .
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 .ratio
et 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 :
<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
.
<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
}
}
<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-ratios
carte 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%)
);