Les images, les figures et les carousels

L’objectif

Voyons dans ce chapitre les classes Bootstrap qui permettent de mettre en forme les images, les figures et les carousels. Les images sont de simples illustrations insérées dans le contenu de la page, alors que les figures comportent une illustration et une légende. Les carousels permettent une interaction avec les visiteurs.

Les 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 :

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 :

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

.img-fluid { 
    max-width: 100%; 
    height: auto; 
} 

Les bordures de l’image

La classe .img-thumbnail permet d’afficher une bordure fine et des coins arrondis à une image qui reste responsive :

<div class="row"> 
   <div class="col"> 
        <p>La même photo de Venise, avec une fine bordure :</p> 
        <img src="venise.jpg" class="img-thumbnail" 
alt="Un canal à Venise"> 
   </div> 
</div> 

Voici l’affichage obtenu sur un petit écran :

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

.img-thumbnail { 
    padding: .25rem; 
    background-color: #fff; 
    border: 1px solid #dee2e6; 
    border-radius: .25rem; 
    max-width: 100%; 
    height: auto; 
} 

<div class="row"> 
   <div class="col"> 
       <img src="dorsoduro-01.jpg" class="float-start" alt="Dorsoduro à Venise"> 
       <img src="dorsoduro-02.jpg" class="float-end" alt="Dorsoduro à Venise"> 
   </div> 
</div> 

.float-start { 
    float: left !important; 
} 
.float-end { 
    float: right !important; 
} 

<div class="row"> 
   <div class="col text-center"> 
        <img src="dorsoduro-03.jpg" class="rounded" 
alt="Dorsoduro à Venise"> 
   </div> 
</div> 

Les sources des images

Dans le design de vos sites web, vous pouvez souhaiter prendre en considération les types d’écrans de vos visiteurs. Ceux-ci peuvent avoir des écrans standards ou des écrans à haute définition. Pour ces derniers il faut prévoir des images à haute définition aussi. Pour mettre en place cette dualité, vous devez utiliser les éléments <picture>, <source> et <img>.

Voici une structure simple :

<picture> 
    <source srcset="venise-hd.jpg" type="image/svg+xml"> 
    <img src="venise.jpg" class="img-fluid img-thumbnail" 
alt="Venise"> 
</picture> 

Analysons cette structure classique :

<div class="row"> 
   <div class="col text-center"> 
        <figure class="figure"> 
            <img src="dorsoduro-01.jpg" class="figure-img 
img-fluid rounded" alt="Venise"> 
            <figcaption class="figure-caption">Basilique 
Santa Maria della Salute.</figcaption> 
        </figure> 
   </div> 
</div> 

.figure { 
    display: inline-block; 
} 
.figure-img...

<div id="venise" class="carousel slide" data-bs-ride="carousel"> 
   <div class="carousel-inner"> 
        <div class="carousel-item active"> 
            <img class="d-block w-100" 
src="dorsoduro-01.jpg" alt="Dorsoduro"> 
        </div> 
        <div class="carousel-item"> 
            <img class="d-block w-100" 
src="dorsoduro-02.jpg" alt="Dorsoduro"> 
        </div> 
            <div class="carousel-item"> 
                    <img class="d-block w-100" 
src="dorsoduro-03.jpg" alt="Dorsoduro"> 
        </div> 
   </div> 
</div>