Contenu

Images

Quelques classes suffisent pour rendre vos images fluides, leur donner un cadre ou les aligner. Elles fonctionnent avec les balises img et svg.

Image fluide#

.img-fluid limite l’image à la largeur de son parent (max-width: 100%) et conserve ses proportions (height: auto). Elle ne s’agrandit jamais au-delà de sa taille d’origine.

<svg class="img-fluid" role="img" aria-label="Illustration d'une agence BDU CI" width="800" height="240" viewBox="0 0 800 240" xmlns="http://www.w3.org/2000/svg">
  <rect width="800" height="240" fill="#2B62AA"/>
  <rect x="300" y="70" width="200" height="130" fill="#fff"/>
  <rect x="380" y="130" width="40" height="70" fill="#387A1B"/>
  <polygon points="280,70 400,20 520,70" fill="#EAEBEA"/>
</svg>

Vignette#

.img-thumbnail ajoute une bordure fine, un petit remplissage, des coins arrondis et la même limite de largeur qu’une image fluide.

<svg class="img-thumbnail" role="img" aria-label="Photo de profil par défaut" width="160" height="160" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
  <rect width="160" height="160" fill="#EAEBEA"/>
  <circle cx="80" cy="62" r="28" fill="#2B62AA"/>
  <path d="M24 160c0-34 25-56 56-56s56 22 56 56z" fill="#2B62AA"/>
</svg>

Coins arrondis et cercle#

Les utilitaires de bordure arrondissent n’importe quelle image : .rounded, .rounded-3, .rounded-circle, .rounded-pill… Voir Bordures.

<svg class="rounded me-2" role="img" aria-label="Carré aux coins arrondis" width="96" height="96" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><rect width="96" height="96" fill="#2B62AA"/></svg>
<svg class="rounded-circle me-2" role="img" aria-label="Disque" width="96" height="96" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><rect width="96" height="96" fill="#387A1B"/></svg>
<svg class="rounded-pill" role="img" aria-label="Forme en gélule" width="160" height="96" viewBox="0 0 160 96" xmlns="http://www.w3.org/2000/svg"><rect width="160" height="96" fill="#0856A1"/></svg>

Alignement#

Alignez une image comme du texte avec text-start, text-center et text-end sur le parent. Pour la faire flotter à côté du texte, utilisez .float-start ou .float-end ; pour la centrer seule, .d-block .mx-auto.

Le texte s'écoule à droite de l'image. Avec .clearfix sur le parent, celui-ci englobe l'image flottante.

<div class="text-center bg-body-secondary border p-2 mb-3">
  <svg class="rounded" role="img" aria-label="Logo centré" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><rect width="64" height="64" fill="#2B62AA"/></svg>
</div>
<div class="bg-body-secondary border p-2 mb-3">
  <svg class="d-block mx-auto rounded" role="img" aria-label="Logo centré en bloc" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><rect width="64" height="64" fill="#387A1B"/></svg>
</div>
<div class="bg-body-secondary border p-2 clearfix">
  <svg class="float-start me-3 rounded" role="img" aria-label="Icône à gauche" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><rect width="64" height="64" fill="#0856A1"/></svg>
  <p class="mb-0">Le texte s'écoule à droite de l'image. Avec <code>.clearfix</code> sur le parent, celui-ci englobe l'image flottante.</p>
</div>

Recadrage avec object-fit#

Quand une image est forcée dans une boîte de taille fixe, .object-fit-cover la recadre sans la déformer. Les autres valeurs : contain, fill, scale et none. Voir Ajustement d’objet.

<div class="row g-3">
  <div class="col-6">
    <svg class="object-fit-cover w-100 rounded" role="img" aria-label="Image recadrée" width="400" height="160" viewBox="0 0 400 160" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <rect width="400" height="160" fill="#2B62AA"/><circle cx="200" cy="80" r="50" fill="#EAEBEA"/>
    </svg>
  </div>
  <div class="col-6">
    <svg class="object-fit-contain w-100 rounded bg-body-secondary border" role="img" aria-label="Image entière" width="400" height="160" viewBox="0 0 400 160" xmlns="http://www.w3.org/2000/svg">
      <rect x="100" width="200" height="160" fill="#387A1B"/>
    </svg>
  </div>
</div>

Image réelle avec texte alternatif#

Avec une vraie image, renseignez toujours alt, ainsi que width et height pour que le navigateur réserve la place avant le chargement. Le code seul est présenté ici.

<img src="agence-plateau.jpg" class="img-fluid rounded" width="800" height="400"
     alt="Façade de l'agence BDU CI du Plateau" loading="lazy">

Images adaptatives#

Pour servir une image plus légère aux petits écrans, ajoutez srcset et sizes, ou l’élément <picture> pour changer de format ou de cadrage. Les classes de Cauri s’appliquent à la balise img intérieure.

<picture>
  <source media="(min-width: 768px)" srcset="banniere-large.webp">
  <img src="banniere-etroite.webp" class="img-fluid" width="400" height="300"
       alt="Découvrez nos offres d'épargne">
</picture>

<img src="carte-400.jpg"
     srcset="carte-400.jpg 400w, carte-800.jpg 800w"
     sizes="(min-width: 768px) 50vw, 100vw"
     class="img-fluid" width="800" height="500" alt="Carte bancaire BDU CI">

Classes pour les images

Classes pour les images
Classe	Effet	Voir
`.img-fluid`	`max-width: 100%` et `height: auto` : l’image s’adapte à son parent.	—
`.img-thumbnail`	Bordure, remplissage `0.25rem`, coins arrondis, fond du thème et largeur maximale 100 %.	—
`.rounded`, `.rounded-{n}`, `.rounded-circle`, `.rounded-pill`	Arrondis des coins.	Bordures
`.float-start`, `.float-end`, `.float-none`	Image flottante à gauche, à droite ou ramenée dans le flux (existent par palier).	Flottement
`.d-block`, `.mx-auto`	Centre une image seule dans son parent.	Affichage
`.object-fit-*`	Recadrage dans une boîte de taille fixe.	Ajustement d’objet
`.ratio`	Boîte à proportions fixes pour une image ou une vidéo.	Ratio
`.figure`, `.figure-img`	Image avec légende.	Figures

Bonnes pratiques

À faire

Décrivez le contenu utile dans alt : « Façade de l’agence du Plateau », pas « image1.jpg ».
Donnez width et height à chaque image pour éviter que la page ne saute au chargement.
Ajoutez loading="lazy" aux images situées sous la première zone visible.
Fournissez des tailles multiples (srcset) et un format moderne (WebP, AVIF) pour alléger les pages sur mobile.

À éviter

N’écrivez pas « image de… » dans le texte alternatif : le lecteur d’écran l’annonce déjà.
N’imposez pas une largeur en pixels à une image sans img-fluid : elle dépassera de l’écran sur téléphone.
Ne mettez pas de texte important uniquement dans une image.

Accessibilité

Une image purement décorative reçoit alt="" (vide), pas d’attribut absent : le lecteur d’écran l’ignore.
Un SVG en ligne qui porte du sens reçoit role="img" et un aria-label ; un SVG décoratif reçoit aria-hidden="true".
Une image qui est aussi un lien ou un bouton doit avoir un texte alternatif qui décrit l’action, pas l’image.
Pour un graphique ou un schéma complexe, donnez la description complète dans le texte voisin.