Односи

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

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

О томе

Користите помоћник за однос да бисте управљали пропорцијама спољашњег садржаја као што су <iframe>с, <embed>с, <video>с и <object>с. Ови помоћници се такође могу користити на било ком стандардном ХТМЛ подређеном елементу (нпр. а <div>или <img>). Стилови се примењују из родитељске .ratioкласе директно на дете.

Пропорције су декларисане у Сасс мапи и укључене у сваку класу преко ЦСС променљиве, што такође омогућава прилагођене размере .

Про врх! Не морате frameborder="0"да користите <iframe>јер ми то замењујемо за вас у Ребоот -у .

Пример

Умотајте било који уграђени елемент, као што је <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>

Односи страница

Пропорције се могу прилагодити класама модификатора. Подразумевано су обезбеђене следеће класе односа:

1к1

4к3

16к9

21к9

<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-*класа укључује ЦСС прилагођено својство (или ЦСС променљиву) у бирачу. Можете заменити ову ЦСС променљиву да бисте креирали прилагођене размере у ходу уз помоћ неке брзе математике са ваше стране.

На пример, да бисте креирали однос ширине и висине 2к1, поставите --bs-aspect-ratio: 50%на .ratio.

2к1

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

Ова ЦСС променљива олакшава модификацију односа ширине и висине преко тачака прекида. Следеће је 4к3 за почетак, али се мења у прилагођено 2к1 на средњој тачки прекида.

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

4к3, затим 2к1

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

Сасс мап

У оквиру _variables.scss, можете променити размере које желите да користите. Ево наше подразумеване $ratio-aspect-ratiosмапе. Измените мапу како желите и поново компајлирајте свој Сасс да бисте их користили.

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