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

Disposition par défaut des images

Le code correspondant

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

J'ai rajouté une règle de style avec : vertical-align:top
Il serait plus logique de créer une classe CSS pour simplifier le code HTML :

Classe dans feuille de style : img.mini {width : 30% ; vertical-align: top;} Code HTML devient tout simplement : <img src ='../images/trikini.jpg' class ="mini"> <img src ='../images/bikini.jpg' class="mini">

Disposer les images dans un tableau HTML

Les huit images ci-dessous sont chacune dans une cellule d'un tableau.

Saumon

Hareng

Anguille

Morue

Sole

Vive

Maquereau

Tacaud

Le code correspondant

Deux règles de style :

	td img {display : block; width : 300px ; height : auto ; margin :10px auto 10px auto ; vertical-align : top;}
	td p {text-align : center; }

Deux règles de style pour les images et les paragraphes contenus dans des cellules de tableau (balise TD).

Le code HTML :

<table> <tr><td><img src ="../img_bio/saumon.jpg" ><p>Saumon</td> <td><img src ="../img_bio/hareng.jpg"><p>Hareng</td></tr> <tr><td><img src ="../img_bio/anguille.jpg"><p>Anguille</td> <td><img src ="../img_bio/morue.jpg"><p>Morue</td></tr> <tr><td><img src ="../img_bio/sole.jpg" ><p>Sole</td> <td><img src ="../img_bio/vive.jpg"><p>Vive</td></tr> <tr><td><img src ="../img_bio/maquereau.jpg"><p>Maquereau</td> <td><img src ="../img_bio/tacaud.jpg"><p>Tacaud</td></tr> </table>

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' /> <figcaption>Réservé aux adultes</figcaption> </figure> <figure><img src ='../images/brune_nue.jpg' /> <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.
Notez la règle de style avec le sélecteur figure img (balise img contenues dans figure)

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 {width : 200px ; }

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 1, elles 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 images

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

... body {width : 800px ; margin : auto ; } img.logo {height : 100px; width : auto ; float : left; margin : 10px; } img.grand {display : block ;width : 80% ; height : auto; margin : 10px auto 10px auto; } img.diapo {height : 200px ; width : auto ; margin : 1%; } ... <div style ="border : 1px solid black;"> <img src ='../images/bikini7.jpg' class='logo'> <p>Blabla ...<br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </div> <img src ='../images/bikini6.jpg' class ='grand' > <img src ='../images/latino_bikini.jpg' class='diapo' > <img src ='../images/noire_bikini.jpg' class='diapo'>

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
Retour menu