Rati

Aduprate pseudo elementi generati per fà chì un elementu mantene u rapportu d'aspettu di a vostra scelta. Perfetta per gestisce in modu reattivu l'incrustazioni di video o di slideshow basatu nantu à a larghezza di u genitore.

In sta pagina

À propositu

Aduprate l'aiutu di ratio per gestisce i rapporti di aspettu di u cuntenutu esternu cum'è <iframe>s, <embed>s, <video>s, è <object>s. Questi aiutanti ponu ancu esse aduprati nantu à qualsiasi elementu HTML standard (per esempiu, a <div>o <img>). Stili sò appiicati da a .ratioclassa parenti direttamente à u zitellu.

I rapporti d'aspettu sò dichjarati in una mappa Sass è inclusi in ogni classa via variabile CSS, chì permette ancu rapporti d'aspettu persunalizati .

Pro-Tip! Ùn avete micca bisognu frameborder="0"di u vostru <iframe>s cum'è noi annunzià quellu per voi in Reboot .

Esempiu

Imbulighjate qualsiasi incrustazione, cum'è un <iframe>, in un elementu parent cù .ratioè una classa di ratio d'aspettu. L'elementu di u zitellu immediatu hè automaticamente dimensionatu grazia à u nostru selettore universale .ratio > *.

html

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

Rapporti d'aspettu

I rapporti d'aspettu ponu esse persunalizati cù classi di modificatori. Per automaticamente, i seguenti classi di ratio sò furniti:

1x1

4x3

16x9

21x9

html

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

Rapporti persunalizati

Ogni .ratio-*classa include una pruprietà persunalizata CSS (o variabile CSS) in u selettore. Pudete annullà sta variabile CSS per creà proporzioni d'aspettu persunalizati nantu à a mosca cù qualchì matematica rapida da a vostra parte.

Per esempiu, per creà un rapportu d'aspettu 2x1, mette --bs-aspect-ratio: 50%nantu à u .ratio.

2x1

html

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

Questa variabile CSS facilita a mudificazione di u rapportu d'aspettu attraversu i punti di rottura. U seguitu hè 4x3 per inizià, ma cambia à un 2x1 persunalizatu à u puntu di rupture mediu.

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

4x3, dopu 2x1

html

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

Mappa Sass

Dentru _variables.scss, pudete cambià i rapporti d'aspettu chì vulete usà. Eccu a nostra mappa predeterminata $ratio-aspect-ratios. Mudificà a mappa cum'è ti piace è ricompilate u vostru Sass per aduprà.

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