Les images avec Bootstrap 3: image responsive

Style d’images avec Bootstrap 3

Les images sont très importantes dans la conception web moderne.

Le style des images et les placer correctement sur les pages web est donc très important pour améliorer l'expérience utilisateur.

En utilisant les classes intégrées de Bootstrap, vous pouvez facilement manipuler des images telles que faire les images de style acculés ou circulaires ronds, ou leur donner un effet de miniatures.

Coins arrondis

La classe .img-rounded ajoute des coins arrondis à une image (IE8 ne supporte pas les coins arrondis) :

  <img src=" images/coq.jpg" class=" img-rounded" alt="image coq coins arrondis">

 

Vignette

La classe .img-thumbnail façonne l'image sous la forme d'une vignette :

  <img src=" images/coq.jpg" class=" img-thumbnail" alt=" image coq forme vibnette ">

 

Cercle

La classe .img-circle façonne l'image d'un cercle (IE8 ne supporte pas les coins arrondis) :

  <img src=" images/coq.jpg" class=" img-circle" alt=" image coq forme vibnette ">

 

Créer des vidéos et des Images responsives

En Bootstrap vous pouvez faire les images responsives, donc des images sensibles qui s'ajustent automatiquement pour s'adapter à la taille de l'écran.

Il suffit d'ajouter la classe .img-responsive à la balise <img> . Cette classe applique principalement les styles max-width: 100%; et height: auto; à l'image afin qu'elle s'adapte bien pour adapter l'élément conteneur — au cas où la largeur de l'image est plus grande que l'élément conteneur lui-même.

  <img src=" images/nature.jpg" class=" img-responsive" alt="image nature responsive">

 

Vous pouvez aussi faire des  vidéos ou un diaporama intégrée dans une page web responsive sans affecter ses proportions d'origine. 

Le Bootstrap réactif incorporer des classes qui peuvent être appliquées directement sur les éléments <iframe>, <embed>, <video> et <object> .

Dans l'exemple ci-dessous, nous avons créé deux vidéos responsives avec deux proportions différentes (16:9 et 4:3) en  ajoutant à leurs blocs contenant respectivement les classes .embed-responsive-16by9 et .embed-responsive-4by3 et la classe .embed-responsive-item à l'élément enfant <iframe> .

  Copier le code

  <!—proportion écran 16:9 -->
  <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/eCA3UihP-mM" frameborder="0" allowfullscreen></iframe>
  </div> 
  <!-- proportion écran 4:3  -->
  <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/eCA3UihP-mM" frameborder="0" allowfullscreen></iframe>
  </div>
 

chapitre précédent     chapitre suivant