Images
Documentation et exemples pour activer les images dans un comportement réactif (afin qu'elles ne deviennent jamais plus grandes que leurs éléments parents) et leur ajouter des styles légers, le tout via des classes.
Images esponsives
Les images dans Bootstrap sont rendues réactives avec .img-fluid. Cela applique max-width : 100 % ; et height : auto; à l'image afin qu'elle soit mise à l'échelle avec l'élément parent.
<img src="..." class="img-fluid" alt="...">Vignettes des images
En plus de nos utilitaires border-radius, vous pouvez utiliser .img-thumbnail pour donner une image une apparence de bordure arrondie de 1 px.
<img src="..." class="img-thumbnail" alt="...">Aligner les images
Aligner les images avec les classes flottantes auxiliaires ou classes d'alignement de texte. Les images de niveau bloc peuvent être centrées à l'aide de la classe d'utilitaire de marge .mx-auto .
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="..."><img src="..." class="rounded mx-auto d-block" alt="..."><div class="text-center">
<img src="..." class="rounded" alt="...">
</div>Image
Si vous utilisez l'élément <picture> pour spécifier plusieurs éléments <source> pour un <img> spécifique, assurez-vous d'ajouter les classes .img-* à la balise <img> et non à la balise <picture>.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Variables
Des variables sont disponibles pour les vignettes d'images.
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;