Pour placer une image sur votre page nous avons déjà vu qu'il fallait utiliser l'élément img
avec deux attributs. Nous avons également vu que l'élément img
était un élément embarqué dans la page, que le plus souvent cet élément est placé dans un paragraphe qui est un conteneur de type block
.
Depuis HTML5 il est possible d'utiliser une autre structure qui a une sémantique dédiée à une image ou plus généralement à un média.
Figure
et figcaption
sont des éléments de type block
. La légende peut être placée avant ou après la ou les photos voire plus généralement les médias. Exemple
Remarquez bien que des règles de style sont appliquées par défaut par les navigateurs ici vous avez un exemple avec Chrome
Sur les petits écrans essayez de faire en sorte que vos photos occupent toute la largeur de l'écran en procédant comme dans cet exemple
Réduisez la taille de la fenêtre pour aller vers un écran de la taille d'un smartphone et vous verrez que les marges par défaut gauche et droite ne sont pas négligeables.