Съотношения
Използвайте генерирани псевдо елементи, за да накарате даден елемент да поддържа съотношението по ваш избор. Перфектен за отзивчиво обработване на вградени видеоклипове или слайдшоу въз основа на ширината на родителя.
относно
Използвайте помощника за съотношение, за да управлявате пропорциите на външно съдържание като <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>
Съотношения на страните
Съотношенията могат да бъдат персонализирани с модификаторни класове. По подразбиране са предоставени следните класове съотношение:
<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
.
<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
}
}
<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%)
);