Les images responsives IMAGES:Responsives

Bootstrap utilise par défaut des images responsives qui vont donc s’adapter aux tailles des écrans de diffusion.

Le dossier à télécharger des exemples pour les images et les figures est nommé 05-Images-01.

Voici le code d’un exemple simple d’une image insérée dans une grille :

<div class="container"> 
   <div class="row"> 
      <div class="col"> 
          <p>Une photo de Venise :</p> 
          <img src="venise.jpg" class="img-fluid" alt="Un canal à Venise"> 
      </div> 
   </div> 
</div> 

Voici l’affichage obtenu sur un grand écran, l’image occupe toute la place disponible dans la colonne :

Voici l’affichage obtenu sur un petit écran, l’image occupe aussi toute la place disponible dans la colonne mais elle est réduite proportionnellement :

Voici la règle CSS de la classe .img-fluid :

.img-fluid { 
    max-width: 100%; 
    height: auto; 
}