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.
Выход:
Ссылка: https://getbootstrap.com/docs/5.0/helpers/ratio/#custom-ratios