Коефициенти

Користете генерирани псевдо-елементи за да направите елементот да го одржува соодносот на изгледот по ваш избор. Совршен за одговорно ракување со вградувања на видео или слајдшоу врз основа на ширината на родителот.

На оваа страница

За

Користете го помошникот за сооднос за да управувате со соодносите на надворешните содржини како што <iframe>се s, <embed>s, <video>s и <object>s. Овие помошници, исто така, може да се користат на кој било стандарден HTML дете елемент (на пример, a <div>или <img>). Стиловите се применуваат од родителската .ratioкласа директно на детето.

Односите на аспект се декларирани во картата Sass и се вклучени во секоја класа преку променливата CSS, која исто така дозволува приспособени соодноси на аспекти .

Про-Совет! Не ви треба frameborder="0"на вашиот <iframe>s, бидејќи ние го отфрламе тоа за вас во Reboot .

Пример

Завиткајте кое било вметнување, како <iframe>, во родителски елемент со .ratioи класа на сооднос. Елементот непосредно дете автоматски се мери благодарение на нашиот универзален избирач .ratio > *.

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

Односите на аспект

Односите на аспект може да се прилагодат со класи на модификатори. Стандардно се обезбедени следните класи на сооднос:

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>

Прилагодени стапки

Секоја .ratio-*класа вклучува прилагодено својство на CSS (или CSS променлива) во избирачот. Можете да ја отфрлите оваа променлива CSS за да креирате прилагодени соодноси на аспект со некоја брза математика од ваша страна.

На пример, за да креирате сооднос 2x1, поставете --bs-aspect-ratio: 50%го на .ratio.

2x1

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

Оваа променлива CSS го олеснува менувањето на соодносот меѓу точките на прекин. Следното е 4x3 за почеток, но се менува во прилагодено 2x1 на средната точка на прекин.

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

4x3, потоа 2x1

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

Сас мапа

Во рамките _variables.scssна , можете да ги промените соодносите што сакате да ги користите. Еве ја нашата стандардна $ratio-aspect-ratiosмапа. Изменете ја мапата како што сакате и прекомпајлирајте го вашиот Sass за да ги користите.

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