Razmerja

Uporabite ustvarjene psevdo elemente, da zagotovite, da bo element ohranil razmerje stranic po vaši izbiri. Popoln za odzivno obdelavo vdelanih videoposnetkov ali diaprojekcij glede na širino nadrejenega.

Na tej strani

O tem

Uporabite pomočnik za razmerja za upravljanje razmerij zunanjih vsebin, kot <iframe>so s, <embed>s, <video>s in <object>s. Te pomočnike je mogoče uporabiti tudi na katerem koli standardnem podrejenem elementu HTML (npr. a <div>ali <img>). Slogi se uporabijo iz nadrejenega .ratiorazreda neposredno na otroka.

Razmerja stranic so deklarirana v zemljevidu Sass in vključena v vsak razred prek spremenljivke CSS, ki omogoča tudi razmerja stranic po meri .

Pro-Nasvet! Ne potrebujete frameborder="0"na vašem <iframe>s, saj ga namesto vas preglasimo v Reboot .

Primer

Ovijte vsako vdelavo, kot je <iframe>, v nadrejeni element z .ratioin razredom razmerja stranic. Neposredni podrejeni element se samodejno prilagodi velikosti zahvaljujoč našemu univerzalnemu izbirniku .ratio > *.

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

Razmerja stranic

Razmerja stranic je mogoče prilagoditi z razredi modifikatorjev. Privzeto so na voljo naslednji razredi razmerij:

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>

Razmerja po meri

Vsak .ratio-*razred vključuje lastnost CSS po meri (ali spremenljivko CSS) v izbirniku. To spremenljivko CSS lahko preglasite, da sproti ustvarjate razmerja stranic po meri z nekaj hitre matematike.

Na primer, če želite ustvariti razmerje stranic 2x1, nastavite --bs-aspect-ratio: 50%na .ratio.

2x1

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

Ta spremenljivka CSS olajša spreminjanje razmerja stranic prek prelomnih točk. Sledi 4x3 za začetek, vendar se na srednji prelomni točki spremeni v 2x1 po meri.

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

4x3, nato 2x1

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

Zemljevid Sass

Znotraj _variables.scsslahko spremenite razmerja stranic, ki jih želite uporabiti. Tukaj je naš privzeti $ratio-aspect-ratioszemljevid. Spremenite zemljevid, kot želite, in znova sestavite svoje Sass, da jih uporabite.

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