Ratio ^commun

Pour appliquer des ratios à des éléments HTML tels que iframe, embed, video, object.
Il faut mettre la classe .ratio sur l'élément ainsi qu'une classe précisant le ratio demandé .ratio-*.

<div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/CCHdMIEGaaM?si=CFwJKu_SzAvT-0cE" allowfullscreen></iframe>                
</div>

Quelques exemples de ratios disponibles.

.ratio-1x1
.ratio-4x3
.ratio-16x9
.ratio-21x9

<div class="ratio ratio-1x1">
    <img src="data/common/img/visual.jpg" loading="lazy" alt="...">
</div>
<div class="ratio ratio-4x3">
    <img src="data/common/img/visual.jpg" loading="lazy" alt="...">
</div>
<div class="ratio ratio-16x9">
    <img src="data/common/img/visual.jpg" loading="lazy" alt="...">
</div>
<div class="ratio ratio-21x9">
    <img src="data/common/img/visual.jpg" loading="lazy" alt="...">
</div>

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