Forhold

Bruk genererte pseudoelementer for å få et element til å opprettholde sideforholdet du velger. Perfekt for responsiv håndtering av video- eller lysbildefremvisninger basert på bredden på forelderen.

På denne siden

Om

Bruk forholdshjelperen til å administrere sideforhold for eksternt innhold som <iframe>s, <embed>s, <video>s og <object>s. Disse hjelperne kan også brukes på alle standard underordnede HTML-elementer (f.eks. a <div>eller <img>). Stiler brukes fra overordnet .ratioklasse direkte på barnet.

Aspektforhold er deklarert i et Sass-kart og inkludert i hver klasse via CSS-variabel, som også tillater egendefinerte størrelsesforhold .

Pro-tips! Du trenger ikke frameborder="0"på din <iframe>s, da vi overstyrer det for deg i Reboot .

Eksempel

Pakk inn en hvilken som helst innebygging, som en <iframe>, i et overordnet element med .ratioen sideforholdsklasse. Det umiddelbare barneelementet blir automatisk dimensjonert takket være vår universalvelger .ratio > *.

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

Sideforhold

Aspektforhold kan tilpasses med modifikasjonsklasser. Som standard er følgende forholdsklasser gitt:

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>

Egendefinerte forholdstall

Hver .ratio-*klasse inkluderer en egendefinert CSS-egenskap (eller CSS-variabel) i velgeren. Du kan overstyre denne CSS-variabelen for å lage tilpassede sideforhold på farten med litt rask matematikk fra din side.

For å lage et sideforhold på 2x1, sett --bs-aspect-ratio: 50%på .ratio.

2x1

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

Denne CSS-variabelen gjør det enkelt å endre sideforholdet på tvers av bruddpunkter. Følgende er 4x3 til start, men endres til en egendefinert 2x1 ved middels bruddpunkt.

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

4x3, deretter 2x1

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

Sass kart

Innenfor _variables.scsskan du endre sideforholdet du vil bruke. Her er standardkartet vårt $ratio-aspect-ratios. Endre kartet som du vil, og kompiler Sass på nytt for å ta dem i bruk.

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