On utilise la balise <img> pour inserer des images dans la page HTML. Deux attributs sont obligatoires:

• L’attribut src pour spécifier le nom du fichier image à charger.
• L’attribut alt pour indiquer un contenu alternatif, c’est à dire un texte à afficher à la place de l’image lorsque, pour différentes raisons, elle n’apparaît pas.

Bootstrap 3 propose d’enrichir la balise <img> de trois mises en forme originales avec la collection de classes .img-* :

Testons ces trois classes avec une photographie d’une vase à fleur.

Des bords d’image arrondis

Nous allons ici utiliser la classe .img-rounded :

L’utilisation de la classe .img-rounded permet d’arrondir les coins de notre image.

Observons le résultat sur notre navigateur :

Des bords d’image arrondis – Bootstrap 3

Une image circonscrite dans un cercle

Cet effet sera obtenu en ajoutant la classe .img-circle :

Visionnons le résultat :

Image circonscrite dans un cercle – Bootstrap 3

L’effet Polaroïd

Bootstrap 3 permet d’obtenir ce rendu à l’aide de la classe .img-thumbnail :

Visionnons le résultat :

Cette image est encadrée d’une bordure composée d’un arrière-plan de couleur blanche et d’un liseré gris.

Les images insérées dans une page HTML sont affichées sans modification des dimensions. Pour utiliser, sur une partie seulement de l’écran, une image dotée d’un grand format, il faut l’insérer dans la grille de Bootstrap 3.

Prenons le fichier vase-a-fleur.jpg, qui est un plan un petit peu large de l’illustration qui nous a servie dans les exemples précédents. Cette image a une largeur de 600 pixels et une hauteur de 800 pixels. Si nous l’affichons telle quelle dans notre page, celle-ci sera complètement écrasée par l’image. Nous allons donc l’intégrer à la grille de notre corps de page de façon à ce qu’elle n’occupe que 4 colonnes sur un écran d’ordinateur de bureau, 5 sur une tablette et 12 sur un smartphone. Dans ce cas, nous serons amenés à écrire le code suivant :

Observons comment la dimension de l’image évolue en fonction des supports :

En cours de rédaction.