Соотношения сторон
Используйте сгенерированные псевдоэлементы для сохранения выбранных пропорций. Идеально подходит для быстрой обработки встраиваемых видео или слайд-шоу в зависимости от ширины родительского элемента.
Обзор
Правила применяются прямо для элементов <iframe>, <embed>, <video> и <object>. Эти помощники также можно использовать в любом стандартном дочернем элементе HTML (например, <div> или <img>). Стили применяются из родительского класса .ratio непосредственно к дочернему.
Соотношения сторон объявляются в карте Sass и включаются в каждый класс через переменную CSS, что также позволяет настраивать соотношения сторон.
frameborder="0" в элементы <iframe>, поскольку мы переопределим их для вас в Reboot.
Пример
Оберните вставленный объект, например <iframe>, родительским элементом класса .ratio и класса соотношения сторон. Размер непосредственного дочернего элемента автоматически изменяется благодаря нашему универсальному селектору .ratio > *.
<divclass="ratio ratio-16x9"><iframesrc="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"title="YouTube video"allowfullscreen></iframe></div>Соотношение сторон
Соотношения сторон можно настроить с помощью классов-модификаторов. По умолчанию предусмотрены следующие классы соотношений сторон:
<divclass="ratio ratio-1x1"><div>1x1</div></div><divclass="ratio ratio-4x3"><div>4x3</div></div><divclass="ratio ratio-16x9"><div>16x9</div></div><divclass="ratio ratio-21x9"><div>21x9</div></div>Пользовательские пропорции
Каждый класс .ratio-* включает настраиваемое свойство CSS (или переменную CSS) в селекторе. Вы можете переопределить эту переменную CSS, чтобы создавать настраиваемые соотношения сторон на лету с помощью некоторых быстрых вычислений с Вашей стороны.
Например, чтобы создать соотношение сторон 2x1, установите --bs-aspect-ratio: 50% для параметра .ratio.
<divclass="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
}}<divclass="ratio ratio-4x3"><div>4x3, затем 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%));