Sommaire

Les miniatures

Les miniatures vous permettent d’afficher vos images dans un cadre à bord gris clair. Dans un élément <img>, utilisez simplement la classe .thumbnail.

<img class="thumbnail" src="img/tigre.jpg" alt="Un tigre allongé">

Le fichier de cet exemple à télécharger est Chapitre 11 / 11-medias-f.html.

Voici l’affichage obtenu :

images/C11-010.png

Voici les propriétés utilisées avec cette classe :

.thumbnail { 
  border: solid 4px #fefefe; 
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2); 
  display: inline-block; 
  line-height: 0; 
  max-width: 100%; 
  transition: box-shadow 200ms ease-out; 
  border-radius: 0; 
  margin-bottom: 1rem; 
}