Débuter en programmation web - sommaire

Disposer des images dans la 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 le HTML ou le CSS.

Emploi du HTML : la balise IMG

Pour insérer une image dans une page, le plus simple est d'utiliser du code 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 orpheline ; elle ne peut contenir aucune autre balise.
Ces deux images sont côte à côte c'est logique. La balise IMG est une balise "inline" mais on peut la transformer en élément "block".
Les deux images ont la même largeur (30% de celle du conteneur) mais pas la même hauteur afin qu'elles ne soient pas déformées (respect du ration hauteur/largeur).

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é : <img src ='../images/trikini.jpg' style =" width : 30% ; vertical-align: top;" alt ="trikini"> <img src ='../images/bikini.jpg' style =" width : 30% ; vertical-align: top;" alt ="bikini">

Les images sont désormais alignées par le haut car j'ai rajouté dans la règle de style en ligne : "vertical-align : top".

J'ai aussi rajouté l'attribut alt qui 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 mis en forme les images via une règle de style en ligne. Il serait plus logique de créer une classe CSS pour simplifier le code HTML. Code CSS : img.mini {width : 30% ; vertical-align: top;} Code HTML : <img src ='../images/trikini.jpg' class ="mini" ... > <img src ='../images/bikini.jpg' class="mini" ... >

Créer une galerie photos avec display inline-block

Pour disposere beaucoup de photos sur une page, attribuez leur la propriété "display : inline-block". Ce qui veut dire que les images passent (ou pas) à la ligne suivante selon la largeur de l'écran.
Attention les images sont par défaut alignées par le bas sur la ligne ; rajoutez donc "vertical-align : top".

Le code de l'exemple

Les images ont toutes la même largeur (180px) mais pas la même hauteur pour respecter le proportions.

Pour que les images ne soient pas collées : "margin : 10px 10px".

Le rendu de ce code

Sur vous affichez cette page sur un PC, réduisez progressivement la largeur de la fenêtre et observez ...
D'abord 8 images de front puis 6, puis 4 puis 2. Donc un afficage "responsive".

Cette technique de positionnement est désormais obsolète. Je vous conseille d'utiliser l'outil "flexbox".
Si les "flex items" sont des images, vous pourrez utiliser la propriété object-fit pour que les images aient toutes la même taille et avec le respect des proportions (mais au prix d'un rognage).
CSS3 - révolution dans le positionnement ...

Centrage de l'image dans sa boîte parente

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" !

Positionner une image ou plusieurs images dans sa boite "parente"

Si on veut que le texte d'un paragraphe encadre une image, il suffit de faire "flotter" cette image à gauche ou à droite dans son conteneur (le paragraphe).

Les classes CSS utilisées dans les exemples ci-dessous : img.flotte_g {height :100px ; width : auto; float : left ; margin : 1% ; } img.flotte_d {height:100px ;width : auto ; float : right ; margin : 1% ; }

Notez bien la propriété "float: left" pour la première classe ; "float : right" pour la seconde !

Premier exemple

L'image se positionne à gauche et le texte est décalé à sa droite.

Le code HTML correspondant : <p><img src ='../images/seins_nus.jpg' class='flotte_g'> Huic Arabia est conserta, ex alio latere Nabataeis contigua; opima varietate ... ... <p>Accedebant enim eius asperitati ...

Deuxième exemple

Le code correspondant : <p><img src ='../images/latino_bikini.jpg' class='flotte_g'> <img src ='../images/noire_bikini.jpg' class='flotte_d'> Accedebant enim eius asperitati, ... <p style ="clear:both;"><b>Le texte continue désormais sous les images flottantes ; il n'ya plus de retrait. </b> ...

Une image positionnée à gauche et une autre à droite.
Le texte du premier paragraphe est en retrait tant à gauche qu'à droite.
Par contre le texte du deuxième paragraphe n'est plus en retrait ; on a mis fin au retrait grâce à la propriété CSS "clear: both" appliquée au paragraphe.

Risque de déformation d'une image

Exemple

La règle de style dans la feuille de style externe est la suivante :

img {width : 200px ; }

Par contre la règle de style dans la feuille de style de la page est :

img {height : 200px ; }

Conséquence : dans la page toutes les images seront affichées avec la taille 200 pixels 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 (rajout d'une propriété) :

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

Insérer une image via CSS

Si vous voulez que du texte soit écrit au dessus d'une image, il faut insérer l'image dans une boite via le raccourci CSS "background" (ou toutes les propriétés CSS préfixées "background". Cette image doit être relativement transparente afin que le texte reste lisible.

Exemple 1

Une boite avec en fond une image dupliquée et du texte :

Le code correspondant

Par défaut 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

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-".

Innovations avec HTML5 & CSS3

Dans le cadre des nouvelles spécifications CSS, le raccourci "background" est notablement enrichi. Désormais une boite peut avoir plusieurs images de fond OU l'image de fond unique peut s'adapter parfaitement aux dimensions du conteneur, etc. CSS3 - raccourci background enrichi

Par ailleurs il est possible avec HTML5 d'intégrer l'élément IMG dans le nouveau conteneur FIGURE pour légender une image. Nouvelle balise FIGURE

En combinant le nouvel outil de positionnement "flexbox" et la nouvelle propriété pour les images object-fit on peut réaliser facilement de superbes galeries photos ou toutes les images ont la même taille même avec des proportions différentes ... : rognage automatique ! CSS3 - nouveaux outils de positionnement