Bootstrap 5 Ratio Пользовательские соотношения

Пользовательские соотношения Bootstrap 5 позволяют нам устанавливать соотношение сторон с помощью пользовательского свойства CSS. Вы можете создавать собственные соотношения сторон для HTML-элементов, просто заменяя классы модификаторов переменными CSS. Каждый класс ratio-* содержит пользовательское свойство или переменную CSS в селекторе.

• соотношение-1×1: 1080×1080 пикселей
• соотношение-4×3: 1024×768 пикселей
• соотношение-16×9: 1920×1080 пикселей
• соотношение-21×9: 2560×1080 пикселей

Bootstrap 5 Ratio Класс пользовательских соотношений: нет класса для настраиваемого соотношения, это зависит от разработчика, какое соотношение он/она хочет.

Синтаксис:

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>. . .</div>
</div>
<div class="ratio ratio-4x3">
  <div>. . .</div>
</div>

Пример ниже иллюстрирует пользовательские соотношения Bootstrap 5 Ratio:

Пример 1: Установите –bs-aspect-ratio: 50 % для соотношения сторон, чтобы получить соотношение сторон 2 × 1.

Выход:

Пример 2: Соотношение сторон можно легко изменить между контрольными точками благодаря этой переменной CSS. Следующее начинается как 4×3, но в средней точке останова оно переключается на 2×1.

Выход:

Bootstrap 5 Ratio Пользовательские соотношения