Rapporti

Usa gli pseudo elementi generati per fare in modo che un elemento mantenga le proporzioni di tua scelta. Perfetto per gestire in modo reattivo gli incorporamenti di video o presentazioni in base alla larghezza del genitore.

Su questa pagina

Di

Usa l'helper per le proporzioni per gestire le proporzioni del contenuto esterno come <iframe>s, <embed>s, <video>s e <object>s. Questi helper possono anche essere usati su qualsiasi elemento figlio HTML standard (ad esempio, a <div>o <img>). Gli stili vengono applicati dalla .ratioclasse genitore direttamente al figlio.

Le proporzioni sono dichiarate in una mappa Sass e incluse in ogni classe tramite la variabile CSS, che consente anche proporzioni personalizzate .

Suggerimento professionale! Non è necessario frameborder="0"il tuo <iframe>s poiché lo sovrascriviamo per te in Reboot .

Esempio

Avvolgi qualsiasi incorporamento, come un <iframe>, in un elemento padre con .ratioe una classe di proporzioni. L'elemento figlio immediato viene ridimensionato automaticamente grazie al nostro 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>

Proporzioni

Le proporzioni possono essere personalizzate con classi di modificatori. Di default sono fornite le seguenti classi di rapporti:

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 personalizzati

Ogni .ratio-*classe include una proprietà personalizzata CSS (o una variabile CSS) nel selettore. Puoi sovrascrivere questa variabile CSS per creare al volo proporzioni personalizzate con un po' di matematica veloce da parte tua.

Ad esempio, per creare un rapporto di aspetto 2x1, impostare --bs-aspect-ratio: 50%su .ratio.

2x1

html

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

Questa variabile CSS semplifica la modifica delle proporzioni tra i punti di interruzione. Quanto segue è 4x3 per iniziare, ma cambia in un 2x1 personalizzato al punto di interruzione medio.

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

4x3, poi 2x1

html

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

Mappa Sass

All'interno _variables.scssdi , puoi modificare le proporzioni che desideri utilizzare. Ecco la nostra $ratio-aspect-ratiosmappa predefinita. Modifica la mappa a tuo piacimento e ricompila i tuoi Sass per metterli in uso.

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