Pomery

Použite vygenerované pseudo prvky, aby si prvok zachoval pomer strán podľa vášho výberu. Ideálne na citlivé spracovanie vložených videí alebo prezentácií na základe šírky rodiča.

Na tejto stránke

O

Pomocou pomocníka pomeru môžete spravovať pomery strán externého obsahu, ako sú <iframe>s, <embed>s, <video>s a <object>s. Týchto pomocníkov možno použiť aj na ľubovoľný štandardný podradený prvok HTML (napr. a <div>alebo <img>). Štýly sa aplikujú z rodičovskej .ratiotriedy priamo na dieťa.

Pomery strán sú deklarované v mape Sass a zahrnuté v každej triede prostredníctvom premennej CSS, ktorá tiež umožňuje vlastné pomery strán .

Pro-Tip! Nepotrebujete to frameborder="0"na vašom <iframe>s, pretože to prepíšeme za vás v Reboot .

Príklad

Zabaľte akékoľvek vloženie, napríklad <iframe>, do nadradeného prvku s .ratiotriedou pomeru strán a . Okamžitý detský prvok je automaticky dimenzovaný vďaka nášmu univerzálnemu voliču .ratio > *.

html

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

Pomery strán

Pomery strán je možné prispôsobiť triedami modifikátorov. Štandardne sú k dispozícii nasledujúce triedy pomerov:

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>

Vlastné pomery

Každá .ratio-*trieda obsahuje vlastnú vlastnosť CSS (alebo premennú CSS) v selektore. Túto premennú CSS môžete prepísať, aby ste mohli za chodu vytvárať vlastné pomery strán pomocou rýchlej matematiky z vašej strany.

Ak chcete napríklad vytvoriť pomer strán 2x1, nastavte --bs-aspect-ratio: 50%na .ratio.

2x1

html

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

Táto premenná CSS uľahčuje úpravu pomeru strán medzi bodmi prerušenia. Nasleduje začiatok 4x3, ale pri strednom bode zlomu sa zmení na vlastný 2x1.

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

4x3, potom 2x1

html

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

Sass mapa

V rámci _variables.scssmôžete zmeniť pomery strán, ktoré chcete použiť. Tu je naša predvolená $ratio-aspect-ratiosmapa. Upravte mapu, ako sa vám páči, a prekompilujte svoje Sass, aby ste ich mohli používať.

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