Débuter en HTML & CSS : insérer des images dans une page web
Dans un chapitre précédent je vous ai présenté les différents types d'images pouvant être insérés dans une page web : les images matricielles et moins
connues mais promis à un bel avenir, les images vectorielles (le plus souvent au format SVG).
Pour insérer une image (matricielle ou vectorielle) dans une page vous pouvez utiliser HTML ou CSS.
Emploi du HTML : la balise IMG
Pour insérer une image dans une page, le plus simple est d'utiliser HTML et plus précisèment la balise IMG.
L'image sera à l'occasion redimensionnée.
Disposition par défaut des images
Le code correspondant
Notez que la balise IMG est une balise simple ; elle ne peut contenir aucune autre balise.
Ces deux images sont côte à côte c'est logique. Par défaut la balise IMG est une balise "inline".
Les deux images sont redimensionnées : largeur = 30% de celle du conteneur parent ; hauteur recalculée dans le respect des proportions.
Par défaut les images sont alignées verticalement par le bas ! Ce qui n'est pas très joli. En effet valeur par défaut de vertical-align est "baseline".
Solution
Le code corrigé :
L'attribut alt n'est pas obligatoire pour le navigateur mais exigé par la spécification sinon le code HTML n'est pas considéré comme valide.
La valeur de cet attribut est un texte alternatif qui s'affiche uniquement si l'image n'a pu être chargée.
Cet attribut est aussi utilisé dans le cadre du SEO (référencement naturel de la page).
J'ai rajouté aussi une règle de style en ligne via l'attribut style.
Il serait plus logique de créer une classe CSS pour simplifier le code HTML.
Centrage de l'image dans sa boîte parente : technique ancienne
Ces deux images sont centrées horizontalement.
Le code CSS & HTML correspondant
J'ai rajouté à chaque élément IMG l'attribut TITLE. Il y a alors ajout d'une étiquette lisible seulement lorsque l'utilisateur laisse la souris
sur l'image.
Grâce à la classe "centrage" l'image concernée devient un élément "block" qui est centré horizontalement dans son conteneur avec une largeur égale à 40%
de celle du conteneur.
Je rappelle que "margin:auto" ne peut s'appliquer qu'à des éléments "block" !
Nouvelle technique pour centrer : emploi de la balise FIGURE
La spécification HTML 5 introduit la balise FIGURE.
Je n'en dis pas plus, visitez dans le même site le "tutoriel HTML - version 5".
Positionner une image ou plusieurs images "inline" dans sa boite "parente"
Blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
Blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
Le code CSS & HTML correspondant
Pour placer un élément "inline" dans une boite il faut utiliser la propriété float : left / right
Les images peuvent déborder de leur boite !
Par défaut une boite adapte sa hauteur au texte contenu et non pas par rapport à la hauteur de l'image contenue.
La solution : donner une hauteur minimale à chaque boite DIV, par exemple min-height : 150px
Risque de déformation d'une image
Exemple
Règle de style dans la feuille de style externe :
img {width : 200px ; }
Règle de style dans la feuille de style de la page :
img {height : 200px ; }
Conséquence : dans la page toutes les images seront affichées avec la taille 200 par 200.
Donc si leur ratio d'origine largeur/hauteur est différent de un, les images seront déformées !!!
Solution :
Dans la feuille de style interne il faut écrire la règle de style de la façon suivante :
img {height : 200px ; width : auto ; }
Vous forcez le navigateur à recalculer la largeur (width : auto) afin de respecter le ratio d'origine entre hauteur et largeur.
Classes pour les éléments IMG
Dans une page certaines images doivent être affichées avec une grande taille, d'autres avec une taille moyenne et enfin d'autres doivent
être minuscules (logo).
Il est donc fortement conseillé de créer différentes classes pour les éléments IMG.
Le code d'une page
CSS : 3 classes pour les images ; à chaque fois recalcul de la largeur en fonction de la hauteur ou inversement afin qu'il n'y ait jamais déformation.
HTML : chaque image se voit appliquer une classe. Rendu de ce code
Autres balises pour insérer des images
Dans certains cas un document SVG (document Inkscape le plus souvent) ne peut être inséré avec la balise IMG ; il faut alors utiliser la balise OBJECT.
Voir tutoriel Inkscape
La norme HTML5 propose aussi la nouvelle balise PICTURE.
Cette balise est très utile pour faire du "responsive design" puisqu’elle permet de changer la source d’une image en fonction de la taille d’écran.
Voir tutoriel HTML - version 5
Insérer une image via CSS
Les propriétés CSS préfixées "background-" (ou le raccourci "background") peuvent être employées pour placer une image en guise de fond d'une boite.
Le texte éventuel de la boite se placera au dessus de l'image !
Exemple 1
Une boite avec en fond une image dupliquée et du texte :
La propriété background est très utile :
Blabla ...
Blabla ...
Blabla ...
Blabla ...
Le code correspondant
Si vous voulez superposer du texte sur une image il faut créer une boite contenant l'image via le raccourci background
Cette image doit être relativement transparente afin que le texte reste lisible.
Par défaut si l'image est insérée avec sa taille native et si celle-ci est plus petite que la boite conteneur, elle est répétée sur les deux axes car
la valeur par défaut de "background-repeat" est "repeat" !
Exemple 2
La propriété background est très utile :
Blabla ...
Blabla ...
Blabla ...
Blabla ...
L'image n'est insérée qu'une fois !
Le code correspondant
A la place du raccourci "background" j'ai utilisé deux propriétés préfixées "background-".
CSS3 et propriétés "background-"
Avec la spécification CSS 3, de nouvelles propriétés préfixées "background-" apparaissent.
Je n'en dis pas plus dans cette page ; visitez le tutoriel CSS.
Vous verrez que les nouveautés sont impressionnantes ...
Tutoriel CSS - version 3