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 :

images/C05-001.png

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 :

images/C05-002.png

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

.img-fluid { 
        max-width: 100%; 
        height: auto; 
} 
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
L'objectif
Suivant
Les bordures de l'image