Съотношения

Използвайте генерирани псевдо елементи, за да накарате даден елемент да поддържа съотношението по ваш избор. Перфектен за отзивчиво обработване на вградени видеоклипове или слайдшоу въз основа на ширината на родителя.

На тази страница

относно

Използвайте помощника за съотношение, за да управлявате пропорциите на външно съдържание като <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>

Карта на Sass

В рамките _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%)
);