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 :

Cercle :

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 :

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

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 :

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

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

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

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

Bouton

Bouton

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 :

En-tête du média

Contenu, image tirée vers la gauche

En-tête du média

Contenu, image tirée vers la droite

Comme des listes :

En-tête

Contenu, image tirée vers la gauche
En-tête

Contenu, image tirée vers la gauche

En-tête

Contenu, image tirée vers la droite
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:: 2019-04-11