Conseils
Le composant images et figures permet d’ajouter des images et des figures réactives à votre site Web ou à votre application. Il comprend diverses options d’affichage et de mise en page des images et des figures, comme le redimensionnement, le recadrage et l’ajout de légendes. Par défaut, toutes les images sont sensibles à leurs conteneurs parents.
L'élément <img> permet d’afficher des images, tandis que l’élément
<figure> permet d’englober l’image et la légende.
Images
L'élément <img> est une balise autonome utilisée pour afficher une seule image. Il
nécessite deux attributs : src, qui précise l’adresse URL de l’image, et alt,
qui fournit une description textuelle de l’image à des fins d’accessibilité.
HTML
<img src="img/votre-image.jpg" alt="Décrire l'image" />
Images avec un rapport hauteur/largeur de 16:9
L’utilisation d’un format d’image uniforme vous permet de conserver une esthétique visuelle cohérente dans l’ensemble de votre site Web ou de votre application. En rognant les images pour obtenir un rapport hauteur/largeur de 16:9, vous tirez le meilleur parti de l’espace disponible sur le site Web. Il s’agit du rapport standard utilisé dans les médias visuels, qui permet d’afficher des images de plus grande taille sans occuper davantage d’espace vertical.
HTML
<div class="gnb-img-ratio">
<img src="img/votre-image.jpg" alt="Décrire l'image" />
</div>
Figures
L'élément <figure> est utilisé pour regrouper une image et la légende qui en décrit
le contenu. Une légende peut être associée à l’élément <figure> en insérant un
élément <figcaption>
HTML
<!-- Figure -->
<figure>
<img src="img/votre-image.jpg" alt="Décrire l'image" />
<figcaption>Une légende pour l'image ci-dessus.</figcaption>
</figure>
<!-- Figure avec image avec un rapport hauteur/largeur de 16:9 -->
<figure>
<div class="gnb-img-ratio">
<img src="img/votre-image.jpg" alt="Décrire l'image" />
</div>
<figcaption>Une légende pour l'image ci-dessus.</figcaption>
</figure>