Förhållanden

Använd genererade pseudoelement för att få ett element att bibehålla bildförhållandet som du väljer. Perfekt för lyhörd hantering av video- eller bildspelsinbäddningar baserat på förälderns bredd.

På den här sidan

Handla om

Använd kvothjälpen för att hantera bildförhållandet för externt innehåll som <iframe>s, <embed>s, <video>s och <object>s. Dessa hjälpare kan också användas på alla vanliga HTML-underordnade element (t.ex. a <div>eller <img>). Stilar tillämpas från den överordnade .ratioklassen direkt på barnet.

Bildförhållande deklareras i en Sass-karta och ingår i varje klass via CSS-variabel, som också tillåter anpassade bildförhållanden .

Proffstips! Du behöver inte frameborder="0"på din <iframe>s eftersom vi åsidosätter det åt dig i Reboot .

Exempel

Slå in valfri inbäddning, som en <iframe>, i ett överordnat element med .ratioen bildförhållandeklass. Det omedelbara underordnade elementet dimensioneras automatiskt tack vare vår universalväljare .ratio > *.

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

Bildförhållanden

Bildförhållanden kan anpassas med modifieringsklasser. Som standard tillhandahålls följande kvotklasser:

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>

Anpassade förhållanden

Varje .ratio-*klass inkluderar en anpassad CSS-egenskap (eller CSS-variabel) i väljaren. Du kan åsidosätta denna CSS-variabel för att skapa anpassade bildförhållanden i farten med lite snabb matematik från din sida.

För att till exempel skapa ett bildförhållande på 2x1, ställ in --bs-aspect-ratio: 50%på .ratio.

2x1

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

Denna CSS-variabel gör det enkelt att ändra bildförhållandet över brytpunkter. Följande är 4x3 till start, men ändras till en anpassad 2x1 vid medelhög brytpunkt.

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

4x3, sedan 2x1

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

Sass karta

Inom _variables.scsskan du ändra de bildförhållanden du vill använda. Här är vår standardkarta $ratio-aspect-ratios. Ändra kartan som du vill och kompilera om din Sass för att använda dem.

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