Images Figures ^commun

Les images sont rendues responsives grâce à la classe .img-fluid qui se charge d'adapter l'image à sa balise parente.

<img src="data/common/img/visual.jpg" class="img-fluid" alt="..." loading="lazy">

Bootstrap propose un skin particulier prédéfini pour les images de thumbnails. Il suffit d'ajouter la classe .img-thumbnail sur la balise img
Il est possible de la skinner via les variables prévues.

<img src="data/common/img/visual.jpg" class="img-thumbnail" alt="..." loading="lazy">

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      var(--#{$prefix}body-bg);
$thumbnail-border-width:            var(--#{$prefix}border-width);
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           var(--#{$prefix}border-radius);
$thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm);

<figure class="figure">
    <img src="..." class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              var(--#{$prefix}secondary-color);

Pour appliquer des ratios à des éléments html tels que iframe, embed, video, object.

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

Mettre la classe .embed-responsive sur le parent ainsi que la classe qui contient le format :
.ratio-1x1
.ratio-4x3
.ratio-16x9
.ratio-21x9

Mettre la classe .ratio sur l'objet.