Proporzioni

Obbligano un elemento a mantenere la proporzione scelta. Soluzione ideale per includere video o slideshow responsive basati sulla larghezza dell’elemento parent.

Utilizza queste classi helper per gestire le proporzioni di contenuti esterni come <iframe>, <embed>, <video> e <object>. Queste classi possono inoltre essere utilizzate per ridimensionare qualsiasi elemento HTML standard come <div> o <img>. Gli stili vengono applicati dall’elemento contenitore .ratio all’elemento contenuto.

Le proporzioni predefinite sono dichiarate in una mappa Sass ed incluse in ogni classe con una variabile CSS, la quale permette di generare proporzioni custom.

Pro-Tip! Non hai bisogno di includere l’attributo frameborder="0" nei tuoi <iframe>, questo viene automaticamente sovrascritto.

Esempio

Estendi ogni oggetto, ad esempio un <iframe>, aggiungendo al suo contenitore la classe .ratio e le proporzioni richieste. L’elemento contenuto viene automaticamente ridimensionato grazie al selettore universale ratio > *.

1
2
3
<div class="ratio ratio-16x9">
  <iframe title="Video YouTube" src="https://www.youtube-nocookie.com/embed/RaHmGbBOP84" allowfullscreen></iframe>
</div>

Proporzioni predefinite

Le proporzioni possono essere personalizzate con delle classi apposite.
Vengono fornite le seguenti proporzioni pre-impostate:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="ratio ratio-1x1 ratio-example">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3 ratio-example">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9 ratio-example">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9 ratio-example">
  <div>21x9</div>
</div>

Proporzioni custom

Ogni classe .ratio-* include una variabile CSS nel selettore. Puoi fare un override di questa variabile per creare una proporzione custom al volo facendo un rapido calcolo.

Ad esempio, per creare una proporzione custom 2x1, utilizza il valore --bs-aspect-ratio: 50% sull’elemento .ratio.

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

Questa variabile CSS rende semplice modificare la proporzione a seconda del breakpoint. Il seguente esempio è un 4x3 inizialmente ma cambia a 2x1 al breakpoint md.

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

1
2
3
<div class="ratio ratio-4x3 ratio-example ratio-example-breakpoint">
  <div>4x3, poi 2x1</div>
</div>

Sass map

All’interno del file src\scss\_variables.scss è possibile modificare e aggiungere proporzioni predefinite. Questa è la mappa utilizzata di default. Modifica la mappa a piacimento e ricompila il CSS per utilizzarla.

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