Images
Documentation et exemples pour activer les images dans un comportement réactif (afin qu'elles ne deviennent jamais plus larges que leur parent) et leur ajouter des styles légers, le tout via des classes.
Images réactives
Les images dans Bootstrap sont rendues réactives avec .img-fluid
. Cela s'applique max-width: 100%;
à height: auto;
l'image afin qu'elle soit mise à l'échelle avec la largeur du 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 1px.
<img src="..." class="img-thumbnail" alt="...">
Alignement des images
Alignez les images avec les classes flottantes auxiliaires ou les classes d'alignement de texte . block
les images de niveau peuvent être centrées à l'aide de la .mx-auto
classe utilitaire margin .
<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' <picture>
élément pour spécifier plusieurs <source>
éléments pour un spécifique <img>
, assurez-vous d'ajouter les .img-*
classes à <img>
et non à la <picture>
balise.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Toupet
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;