Sommaire

Les images adaptatives CSS POUR LES IMAGES:Image adaptative

Bootstrap permet d’utiliser des images dont la taille va s’adapter automatiquement à la taille des écrans de diffusion. Une même image aura une taille qui va être proportionnelle à la taille de l’écran de diffusion.

Pour ce faire, utilisez la classe Bootstrap.img-responsive.

Voici le code utilisé :

<p><img src="hippopotame.jpg" alt="Hippopotame" 
class="img-responsive"></p>

Voici l’affichage sur un grand écran :

images/C07-008.png

Pour voir le redimensionnement, il vous suffit de redimensionner la fenêtre de votre navigateur : la taille de l’image est automatiquement diminuée.

Voici les propriétés de la classe .img-responsive :

.img-responsive { 
   display: block; 
   height: auto;
   max-width: 100 %; 
}

Nous disposons d’un affichage en bloc (display: block;), d’une hauteur d’image automatique (height:auto;) et d’une largeur maximale d’image à 100 % (max-width:100 %;).

Le fichier Bootstrap-02-CSS/05-images-adaptative.html illustre cet exemple.