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.
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 .ratio
rechtstreeks 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 .
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 .ratio
en een aspectverhoudingsklasse. Het directe onderliggende element wordt automatisch gedimensioneerd dankzij onze universele selector .ratio > *
.
<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:
<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
.
<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
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass-kaart
Binnen _variables.scss
kunt 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%)
);