Les images dans Bootstrap

Présentation

• Bootstrap fournit des classes pouvant être utilisées lors de l'utilisation de l'élément <img>.
• Les images ont généralement une expansion naturelle. Sur de grands écrans, cela n’est pas critique, cependant montrés sur de petits appareils, ils peuvent quitter la zone de visualisation. Avec .img-fluid, vous pouvez présenter de meilleures images.

Images responsives

• Les images dans Bootstrap sont réactives avec .img-fluid sont appliqués à l'image pour qu'elle soit redimensionnée avec l'élément parent. Cela garantit que l'image est adaptée à l'élément parent.
• Cette classe applique trois actions:
  • max-width: 100%
  • height: Auto
  • display: Block

Coins arrondis et Thumbnails

• Vous pouvez utiliser Bootstrap pour rendre des images avec des coins arrondis ou un cercle.
• Ceci est réalisé avec les classes .rounded-* d'utilitaires.
• Les classes d’utilitaires peuvent être appliquées à n’importe quel élément (pas seulement aux images).
• La classe : .rounded correspondand aux styles css :
  .rounded { border-radius: 0.25rem; }
• Les classes de rayon de bordure sont:
  • rounded
  • rounded-top: Arrondir le haut
  • rounded-right: Arrondir le haut du côté droit
  • rounded-bottom: Arrondir le haut et le bas
  • rounded-left: Arrondir le haut du côté gauche
  • rounded-circle: border-radius: 50%;
  • rounded-0
• Prenons une image, arrondissons ses angles avec la classe .rounded et voyons le résultat.

<div class="container">
          <div class="row">
            <div class="col">
  </br>
    <img src="image.png" alt="..." class="rounded mb-0">
    <img src="image.png" alt="..." class="rounded-top">
    <img src="image.png" alt="..." class="rounded-right">
    <img src="image.png" alt="..." class="rounded-bottom">
    <img src="image.png" alt="..." class="rounded-left">
    <img src="image.png" alt="..." class="rounded-circle">
    <img src="image.png" alt="..." class="rounded-pill">
    <img src="image.png" alt="..." class="rounded-0">
</div>
</div>
</div>

Alignement des images

1. Alignement vertical des images

   • Modifier facilement l’alignement vertical des éléments de cellule en ligne, bloc en ligne, tableau en ligne et tableau.
   • Alignement des images à gauche ou à droite
   Classe : .float-right alignement à droite. Classe : .float-left alignement à gauche.

   <div class="container">
             <div class="row">
               <div class="col">
     </br>
   <img class="float-right" src="image.png" alt="...">
   <img class="float-left" src="image.png" alt="...">
   </div>
   </div>
   </div>

2. Si vous désirez un positionnement différent en fonction des résolutions d’écran vous pouvez bien rajouter les classes responsives comme ceci :
.float-left,.float-right,.float-none,.float-sm-left,.float-sm-right,.float-sm-none,.float-md-left,.float-md-right,.float-md-none,.float-lg-left,.float-lg-right,.float-lg-none,.float-xl-left,.float-xl-right,.float-xl-none

3. Alignement horizontal des images

   • Centrer verticalement en utilisant des marges automatiques

   <div class="row h-100">
       <div class="col-sm-12 my-auto">
           <div class="card card-block w-25">Card</div>
       </div>
   </div>

4. my-auto: représente les marges sur l'axe des y vertical et équivaut à:
margin-top: auto; et margin-bottom: auto;
5. Centrer verticalement en utilisant Flexbox
6. Centrer verticalement à l’aide des utilitaires d’affichage