De nos jours il est très important de faire recourt aux images pour capter l’attention des internautes et faire véhiculer un message sur une page web. Pour ce faire il faut que l’image soit responsive, c’est-à-dire qu’elle se redimensionne en fonction de la taille de la fenêtre du navigateur, et appliquer aussi quelques effets intéressant à vos images .
Nous verrons ici comment grâce Bootstrap4, rendre son image responsive et ajouter des styles à son image.
Rendre une image responsive :
Bootstrap4 met à notre disposition la classe .img-fluid pour définir une image responsive.
Exemple :
<img class="img-fluid" src="working.jpg" alt="texte alternatif">
Appliquer un effet de caption à une image :
Cet effet est très intéressant pour rendre attrayante une gallérie photo, il faut utiliser la classe .img-thumbnail pour réaliser cet effet.
Exemple :
<img class="img-fluid img-thumbnail" src="working.jpg" alt="des designers">
Rendu :
Appliquer des bords arrondis à une image :
La classe permettant d’arrondir les bords de votre image est la classe .rounded.
Exemple :
<img class="img-fluid rounded" src="working.jpg" alt="des designers">
Rendu :
Dessiner un rond autour d’une image :
Il faut utiliser la classe .rounded-circle pour appliquer cet effet mais il faut que l’image à laquelle vous souhaitez appliquer cet effet soit carrée, car cette classe arrondi l’image en hauteur et en largeur et si l’image n’est pas carrée l’image aura après application de l’effet une forme ovale.
Exemple : Si l’image n’est pas au préalable carrée
<img class="img-fluid rounded" src="working.jpg" alt="des designers">
Rendu :
Exemple : Si l’image est au préalable carrée
<img class="img-fluid rounded" src="profil.jpg" alt="Mon profil">
Rendu :
Télécharger le livre : Prise en main de Bootstrap 4
