Proporcions

Utilitzeu pseudoelements generats per fer que un element mantingui la relació d'aspecte que trieu. Perfecte per gestionar de manera sensible les incrustacions de vídeos o presentacions de diapositives en funció de l'amplada del pare.

En aquesta pàgina

Sobre

Utilitzeu l'ajudant de proporció per gestionar les relacions d'aspecte del contingut extern com <iframe>s, <embed>s, <video>s i <object>s. Aquests ajudants també es poden utilitzar en qualsevol element HTML estàndard (per exemple, a <div>o <img>). Els estils s'apliquen des de la .ratioclasse dels pares directament al nen.

Les relacions d'aspecte es declaren en un mapa Sass i s'inclouen a cada classe mitjançant una variable CSS, que també permet relacions d'aspecte personalitzades .

Pro-Tip! No necessiteu frameborder="0"les vostres <iframe>s, ja que ho substituïm a Reiniciar .

Exemple

Emboliqui qualsevol incrustació, com ara <iframe>, en un element pare amb .ratiouna classe de relació d'aspecte. L'element fill immediat es dimensiona automàticament gràcies al nostre selector universal .ratio > *.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Relacions d'aspecte

Les relacions d'aspecte es poden personalitzar amb classes modificadores. Per defecte es proporcionen les següents classes de ràtio:

1x1

4x3

16x9

21x9

<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>

Proporcions personalitzades

Cada .ratio-*classe inclou una propietat personalitzada CSS (o variable CSS) al selector. Podeu substituir aquesta variable CSS per crear relacions d'aspecte personalitzades sobre la marxa amb algunes matemàtiques ràpides de la vostra part.

Per exemple, per crear una relació d'aspecte de 2x1, configureu --bs-aspect-ratio: 50%-lo a .ratio.

2x1

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

Aquesta variable CSS facilita la modificació de la relació d'aspecte entre els punts d'interrupció. El següent és 4x3 per començar, però canvia a un 2x1 personalitzat al punt d'interrupció mitjà.

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

4x3, després 2x1

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

Mapa Sass

A _variables.scss, podeu canviar les relacions d'aspecte que voleu utilitzar. Aquí teniu el nostre $ratio-aspect-ratiosmapa predeterminat. Modifiqueu el mapa com vulgueu i recompileu el vostre Sass per utilitzar-los.

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