Source

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 réactives

Les images dans Bootstrap sont rendues réactives avec .img-fluid. max-width: 100%;et height: auto;sont appliqués à l'image afin qu'elle soit mise à l'échelle avec l'élément parent.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
Images SVG et IE 10

Dans Internet Explorer 10, les images SVG avec .img-fluidsont de taille disproportionnée. Pour résoudre ce problème, ajoutez width: 100% \9;si nécessaire. Ce correctif dimensionne incorrectement les autres formats d'image, donc Bootstrap ne l'applique pas automatiquement.

Vignettes des images

En plus de nos utilitaires border-radius , vous pouvez utiliser .img-thumbnailpour donner à une image une apparence de bordure arrondie de 1px.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." alt="..." class="img-thumbnail">

Alignement des images

Alignez les images avec les classes flottantes auxiliaires ou les classes d'alignement de texte . blockles images de niveau peuvent être centrées à l'aide de la .mx-autoclasse utilitaire margin .

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<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>