Sélection de la langue

Images

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

Utiliser des images afin de représenter visuellement un nom (personne, lieu, chose) ou un verbe (action). Une image est un artefact visuel statique à deux dimensions qui représente un genre de contenu non textuel. Il est classifié comme décoratif, simple, complexe ou une image de texte.

Conception et codage

Utilisation de base

Formes

Utilisez-les pour facilement modifier la forme de <img> (image) sans avoir à utiliser le logiciel d'édition.

Apparence

Par défaut :

Un espace carré générique pour une image

Arrondi :

Un espace carré générique avec coins arrondis

Cercle :

Un espace carré générique pour une image ou seulement l'esapce contenue dans le cercle est visible

Miniature (en hyperlien) :

Un espace carré générique pour une image avec une bordure blanche, lui faisant ressembler à une photo prise avec un ancien appareil photo instantané
Bonne utilisation

Points de conformité :

  • Utilisez uniformément les styles .img-rounded, .img-circle et .img-thumbnail dans un site
  • Appliquez.img-thumbnail seulement aux images hyperliées, car leur bordure permet de penser qu'il s'agit d'un lien
  • Comprenez et mettez en place les principes de soutien connexes
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • N'utilisez pas des images préformées; seulement des images stylisées avec CSS
Code
// Par défaut :
<img src="..." alt="" />

// Arrondi :
<img src="..." class="img-rounded" alt="" />

// Cercle:
<img src="..." class="circle" alt="" />

// Miniature (en hyperlien) :
<a href="#"><img src="..." class="img-thumbnail" alt="" /></a>

Images réactives

Utilisez-les pour agrandir l'échelle des images de façon appropriée et ne dépassez jamais la largeur du conteneur parent. Avec les images réactives, max-width: 100%; et height: auto; sont appliqués automatiquement à l'aide de .img-responsive.

Apparence

Image trop grande pour l'espace disponible :

Un espace générique pour une image

La même image est maintenant réactive et entre dans le conteneur parent :

Un espace générique pour une image
Bonne utilisation

Points de conformité :

  • Utilisez .img-responsive afin de vous assurer que les images ont un comportement réactif et ne deviennent jamais plus larges que leur conteneur parent
  • Vérifiez les images dans différentes résolutions, car les images peuvent être trop larges pour un conteneur dans certaines fenêtres d'affichage, mais pas dans d'autres
  • Comprenez et mettez en place les principes de soutien connexes
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'appliquez pas aux images qui deviennent brouillées, pixélisées ou trop étirées dans les résolutions différentes. Utilisez une image appropriée
Code
<img src="..." class="img-responsive" alt="" />

Étirement des images

Utilisez pour étirer une plus petite image à la largeur du conteneur. Assurez-vous que l'image est toujours claire et facile à voir dans les résolutions plus grandes.

Apparence

L'image (100x25) est trop petite et brouillée :

Un espace générique pour une image

L'image (200x50) est toujours trop petite pour l'espace :

Un espace générique pour une image

L'image étirée (100x25) est floue :

Un espace générique pour une image

L'image étirée et claire (200x50) entre dans l'espace :

Un espace générique pour une image
Bonne utilisation

Points de conformité :

  • Utilisez .full-width afin d'étirer une image qui remplira l'espace disponible
  • Assurez-vous que les images étirées sont claires et faciles à voir dans toutes les fenêtres d'affichage
  • Veillez à ce que les images ne soient pas trop larges pour le conteneur dans n'importe quelle fenêtre d'affichage
  • Comprenez et mettez en place les principes de soutien connexes
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'appliquez pas aux images qui deviennent brouillées, pixélisées ou trop étirées dans les différentes résolutions. Utilisez une image appropriée
Code
<img src="..." class="full-width" alt="" />

Utilisation améliorée

Pavés de miniatures

Utilisez pour ajouter toute sorte de contenu tel que les en-têtes, les paragraphes ou les boutons dans une miniature afin de créer un effet de pavé de miniatures.

Apparence
Un espace générique pour une miniature

Titre (légende)

Contenu

Bonne utilisation

Points de conformité :

  • Placez le contenu dans une balise <figure>
  • Stylisez avec .thumbnail
  • Utilisez un titre stylisé <figcaption class="caption">
  • Appliquez-le seulement aux images hyperliées, car leur bordure permet de penser qu'il s'agit d'un lien
  • Utilisez-le pour créer un pavé de contenu qui comprend une image en vedette
  • Comprenez et mettez en place les principes de soutien connexes
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'appliquez pas aux images qui ne sont pas hyperliées
Code
// Miniature :
<figure class="thumbnail">
  <a href="#"><img src="https://placehold.it/350x200" alt="" /></a>

// Titre (légende) :
  <figcaption class="caption">
   <h4>...</h4>
   <p>...</p>

// Boutons incorporé et de contenu :
   <ul class="list-inline">
    <li><a href="#" class="btn btn-primary" role="button">...</a></li>
    <li><a href="#" class="btn btn-default" role="button">...</a></li>
   </ul>
  </figcaption>
</figure>

Usages médias

Utilisez-les pour ajouter une couche de texte et d'images pour le contenu média tel que les commentaires de blogue, les gazouillis et ainsi de suite.

Apparence
Par défaut  :
Un espace générique pour une image
En-tête du média

Contenu, image tirée vers la gauche

Un espace générique pour une image
En-tête du média

Contenu, image tirée vers la droite

Comme des listes :
  • Un espace générique pour une image
    En-tête

    Contenu, image tirée vers la gauche

  • Un espace générique pour une image
    En-tête

    Contenu, image tirée vers la gauche

  • Un espace générique pour une image
    En-tête

    Contenu, image tirée vers la droite

  • Un espace générique pour une image
    En-tête

    Contenu, image tirée vers la droite.

Bonne utilisation

Points de conformité :

  • Utilisez .media, .media-object, .media-body, .media-heading, .media-list avec un contenu qui requiert une image, ainsi qu'un contenu textuel
  • Utilisez .pull-left ou .pull-right pour placer l'image
  • Assurez-vous que l'image est mise en hyperlien avec la source du média
  • Comprenez et mettez en place les principes de soutien connexes
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'utilisez pas pour autre chose que le contenu média
Code
// Par défaut, image tirée vers la gauche :
<section class="media">
  <a class="pull-left" href="#">
   <img class="media-object" src="..." alt="..." />
  </a>
  <div class="media-body">
   <h5 class="media-heading">...</h5>
   <p>...</p>
  </div>
</section>

// Par défaut, image tirée vers la droite :
<section class="media">
  <a class="pull-right" href="#">
   <img class="media-object" src="..." alt="..." />
  </a>
  <div class="media-body">
   <h5 class="media-heading">...</h5>
   <p>...</p>
  </div>
</section>

// En tant que listes, image tirée vers la gauche :
<ul class="media-list">
   <li class="media"> <a class="pull-left" href="#"><img class="media-object" src="..." alt="" /></a>
    <div class="media-body">
     <h5 class="media-heading">...</h5>
     <p>...</p>
    </div>
   </li>
</ul>

// En tant que listes, image tirée vers la droite :
<ul class="media-list">
   <li class="media"><a class="pull-right" href="#"><img class="media-object" src="..." alt="" /></a>
   <div class="media-body">
    <h5 class="media-heading">...</h5>
    <p>...</p>
   </div>
  </li>
</ul>

Fonctions complémentaires

Des fonctions et des comportements complémentaires sont disponibles.

Principes de soutien

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe).

Date de modification: