Débuter en HTML & CSS : l'art de disposer les images dans une page

Disposition par défaut des images

disposer images dans une page disposer images dans une page

Le code correspondant

... <img src ='../images/trikini.jpg' width ='30%' > <img src ='../images/bikini.jpg' width ='30%'>

Ces deux images sont côte à côte c'est logique. Par défaut la balise IMG est une balise "inline".

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

J'ai rajouté une règle de style avec : vertical-align:top

Centrage de l'image dans sa boîte parente : technique ancienne

Ces deux images sont centrées horizontalement.

Le code CSS & HTML correspondant

... img.centrage {display : block ; width : 40%; margin :10px auto 10px auto; } </style></head> <body> <img src ='../images/burkini.jpg' class="centrage"> <img src ='../images/black_nue.jpg' class ="centrage"> ...

Grâce à la classe "centrage" l'image concernée devient un élément "block" 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 : emploi de la balise FIGURE

HTML5 introduit la balise FIGURE qui peut contenir FIGCAPTION entre autres.

Réservé aux adultes
Interdit aux mineurs

Le code CSS & HTML correspondant

... figure { width : 50% ; margin :10px auto 10px auto; border : 1px solid black;} figure img {display : block ; width : 80% ; margin :10px auto 10px auto; } figcaption {text-align :center ; } ... </style></head> <body> ... <figure><img src ='../images/japonaise_nue.jpg' width ='60%' /> <figcaption>Réservé aux adultes</figcaption> </figure> <figure><img src ='../images/brune_nue.jpg' width ='60%'/> <figcaption>Interdit aux mineurs</figcaption> </figure> ...

FIGURE est une balise nativement de type block.
La balise FIGCAPTION permet de légender un média positionné avec FIGURE.
Attention pour que l'image soit centrée dans la boite FIGURE il faut que la propriété "margin : auto" soit applicable. Or cette propriété ne s'applique qu'aux éléments "block" d'où le "display : block".

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

disposer images dans une page

Blabla ...
blabla ...
blabla ...
blabla ...
blabla ...
blabla ...

Blabla ...
blabla ...
blabla ...
blabla ...
blabla ...

Le code CSS & HTML correspondant

... img.left {height :100px ; width : auto; float : left ; margin : 1% ; } img.right {height:100px ;width : auto ; float : right ; margin : 1% ; } ... <div> <img src ='../images/seins_nus.jpg' class='left' alt ="disposer images dans une page"> <p>Blabla ...<br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </div> <div> <img src ='../images/latino_bikini.jpg' class='right'> <img src ='../images/noire_bikini.jpg' class='left'> <p>Blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </div>

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

Dans la feuille de style externe :

	img.gauche {width : 200px ; }

Dans la feuille de style de la page :

	img.gauche {height : 200px ; }

Conséquence : dans la page toutes les images affectées de la classe "gauche" seront affichées avec la taille 200 par 200.
Donc si leur ratio d'origine largeur/hauteur est différent de 1, elles seront déformées !

Solution :
Dans la feuille de style interne il faut corriger la règle :

	img.gauche {height : 200px ; width : auto ;  }

Vous forcez le navigateur à recalculer la largeur (width : auto) afin de respecter le ratio d'origine entre hauteur et largeur.
Retour menu