in English

Poměry

Použijte vygenerované pseudo prvky, aby si prvek zachoval poměr stran podle vašeho výběru. Ideální pro responzivní zpracování vložení videa nebo prezentací na základě šířky nadřazeného prvku.

Na této straně

O

Pomocí pomocníka pro poměr stran můžete spravovat poměry stran externího obsahu, jako <iframe>jsou s, <embed>s, <video>s a <object>s. Tyto pomocníky lze také použít na jakýkoli standardní podřízený prvek HTML (např. a <div>nebo <img>). Styly jsou aplikovány z nadřazené .ratiotřídy přímo na podřízeného.

Poměry stran jsou deklarovány v mapě Sass a zahrnuty do každé třídy prostřednictvím proměnné CSS, která také umožňuje vlastní poměry stran .

Profesionální tip! frameborder="0"Na svém s nepotřebujete <iframe>, protože to za vás přepíšeme v Rebootu .

Příklad

Zabalte jakékoli vložení, například <iframe>, do nadřazeného prvku s .ratiotřídou a poměrem stran. Bezprostřední podřízený prvek je automaticky dimenzován díky našemu univerzálnímu voliči .ratio > *.

html

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

Poměry stran

Poměry stran lze upravit pomocí tříd modifikátorů. Ve výchozím nastavení jsou poskytovány následující třídy poměrů:

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í poměry

Každá .ratio-*třída obsahuje vlastní vlastnost CSS (nebo proměnnou CSS) v selektoru. Tuto proměnnou CSS můžete přepsat a vytvořit vlastní poměry stran za běhu pomocí rychlé matematiky z vaší strany.

Chcete-li například vytvořit poměr stran 2x1, nastavte --bs-aspect-ratio: 50%na .ratio.

2x1

html

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

Tato proměnná CSS usnadňuje úpravu poměru stran mezi body přerušení. Následující je 4x3 pro začátek, ale změní se na vlastní 2x1 na střední zarážce.

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

4x3, pak 2x1

html

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

Sass mapa

V rámci _variables.scss, můžete změnit poměry stran, které chcete použít. Zde je naše výchozí $ratio-aspect-ratiosmapa. Upravte mapu, jak chcete, a znovu zkompilujte své Sass, abyste je mohli používat.

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