Verhoudingen

Gebruik gegenereerde pseudo-elementen om ervoor te zorgen dat een element de beeldverhouding van uw keuze behoudt. Perfect voor het responsief verwerken van ingesloten video's of diavoorstellingen op basis van de breedte van de ouder.

Op deze pagina

Over

Gebruik de verhoudingshelper om de beeldverhoudingen van externe inhoud zoals <iframe>s, <embed>s, <video>s en <object>s te beheren. Deze helpers kunnen ook worden gebruikt op elk standaard HTML-onderliggend element (bijv. a <div>of <img>). Stijlen worden .ratiorechtstreeks vanuit de bovenliggende klasse op het kind toegepast.

Beeldverhoudingen worden gedeclareerd in een Sass-kaart en in elke klasse opgenomen via CSS-variabele, waardoor ook aangepaste beeldverhoudingen mogelijk zijn .

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

Voorbeeld

Wikkel elke insluiting, zoals een <iframe>, in een bovenliggend element met .ratioen een aspectverhoudingsklasse. Het directe onderliggende element wordt automatisch gedimensioneerd 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>

Lengte-breedte verhoudingen

Beeldverhoudingen kunnen worden aangepast met modificatieklassen. Standaard zijn de volgende verhoudingsklassen voorzien:

1x1

4x3

16x9

21x9

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 verhoudingen

Elke .ratio-*klasse bevat een aangepaste CSS-eigenschap (of CSS-variabele) in de selector. U kunt deze CSS-variabele overschrijven om on-the-fly aangepaste beeldverhoudingen te maken met wat snelle wiskunde van uw kant.

Als u bijvoorbeeld een beeldverhouding van 2x1 wilt maken, stelt u --bs-aspect-ratio: 50%in op de .ratio.

2x1

html

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

Deze CSS-variabele maakt het gemakkelijk om de beeldverhouding over breekpunten te wijzigen. Het volgende is 4x3 om te beginnen, maar verandert in een aangepaste 2x1 op het gemiddelde breekpunt.

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

4x3, dan 2x1

html

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

Sass-kaart

Binnen _variables.scsskunt u de beeldverhoudingen die u wilt gebruiken wijzigen. Dit is onze standaardkaart $ratio-aspect-ratios. Pas de kaart naar wens aan en compileer je Sass opnieuw om ze te gebruiken.

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