Rati
Aduprate pseudo elementi generati per fà chì un elementu mantene u rapportu d'aspettu di a vostra scelta. Perfetta per gestisce in modu responsivo l'incrustazioni di video o di slideshow basatu nantu à a larghezza di u genitore.
À 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 .ratio
classa 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 .
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 > *
.
<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:
<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
.
<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
}
}
<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%)
);