Bootstrap 5.2 / Helpers

Ratio's

Gebruik gegenereerde pseudo-elementen om een element de beeldverhouding van jouw keuze te laten behouden. Perfect om video- of slideshow-embeds responsief af te handelen op basis van de breedte van het bovenliggende element.

Over

Gebruik de ratio-helper om de beeldverhoudingen van externe content zoals <iframe>s, <embed>s, <video>s en <object>s te beheren. Deze helpers kunnen ook op elk standaard HTML-kindelement worden gebruikt (bijv. een <div> of <img>). Stijlen worden vanaf de bovenliggende .ratio-klasse rechtstreeks op het kind toegepast.

Beeldverhoudingen worden gedeclareerd in een Sass-map en in elke klasse opgenomen via een CSS-variabele, wat ook aangepaste beeldverhoudingen mogelijk maakt.

Let op

Pro-tip! Je hebt frameborder="0" niet nodig op je <iframe>s, want dat overschrijven we al voor je in Reboot.

Voorbeeld

Wikkel elke embed, zoals een <iframe>, in een bovenliggend element met .ratio en een beeldverhoudingsklasse. Het directe kindelement krijgt automatisch de juiste afmetingen dankzij onze universele selector .ratio > *.

HTML

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

Beeldverhoudingen

Beeldverhoudingen kunnen worden aangepast met modifier-klassen. Standaard zijn de volgende ratio-klassen beschikbaar:

HTML

<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>

Aangepaste ratio's

Elke .ratio-*-klasse bevat een CSS custom property (oftewel CSS-variabele) in de selector. Je kunt deze CSS-variabele overschrijven om ter plekke aangepaste beeldverhoudingen te maken, met wat rekenwerk van jouw kant.

Om bijvoorbeeld een 2x1-beeldverhouding te maken, stel je --bs-aspect-ratio: 50% in op de .ratio.

HTML

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

Deze CSS-variabele maakt het eenvoudig om de beeldverhouding per breakpoint aan te passen. Het volgende is om te beginnen 4x3, maar verandert bij het medium breakpoint in een aangepaste 2x1.

SCSS

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

HTML

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

Sass-map

In _variables.scss kun je de beeldverhoudingen aanpassen die je wilt gebruiken. Dit is onze standaard $ratio-aspect-ratios-map. Pas de map naar wens aan en compileer je Sass opnieuw om ze in gebruik te nemen.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.