CSS :disposer les images dans une page

Disposition par défaut des images

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

Nouvelle technique : emploi de la balise figure

Réservé aux adultes
Interdit aux mineurs

Positionner une image ou plusieurs images dans sa boîte à gauche ou à droite

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

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

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

Remarque

Les deux premières images sont côte à côte c'est logique. Par défaut la balise img est une balise "inline".
Les quatre suivantes sont les unes en dessous des autres et sont centrées horizontalement.
Quant aux quatre dernières elles "flottent" à gauche ou à droite dans leur boîte.
Remarquez que dans la dernière boîte deux images "flottent à gauche".

Donc lorsque l'on joue sur une seule dimension (width ou height) les proportions d'origine de l'image sont toujours respectées (pas de déformation de l'image).

Extrait de la feuille de style

div {border:1px solid black ; margin :10px auto 10px auto; height :200px; } img.centrage {display : block ; width : 50%; margin :auto; } figure { width : 60% ; margin :10px auto 10px auto;} figure img {width : 80% ; margin :auto; } figcaption {text-align :center ; } img.gauche {width :20% ; float : left ; margin : 1% ; } img.droite {width: 20% ; float : right ; margin : 1% ; } p.gauche {text-align : left;} p.droite {text-align : right ;}

Il y a deux classes "gauche" et deux classes "droite" mais il n'y aura pas d'ambiguïté car deux sont spécifiques à la balise P et deux autres à la balise IMG !

Extrait du code HTML

... <img src ='../images/trikini.jpg' width ='40%' > <img src ='../images/bikini.jpg' width ='40%'> <h2>Centrage de l'image dans sa boîte parente : technique ancienne</h2> <img src ='../images/burkini.jpg' class="centrage"> <img src ='../images/rousse.jpg' class ="centrage"> <h2>Nouvelle technique : emploi de la balise figure</h2> <figure><img src ='../images/jolie_fille.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> <h2>Positionner une image ou plusieurs images dans sa boîte à gauche ou à droite</h2> <div> <img src ='../images/seins_nus.jpg' class='gauche'> <p class ="gauche">Blabla ... <br>blabla ... </div> <div> <img src ='../images/monokini.jpg' class='droite'> <p class ="droite">Blabla ... <br>blabla ... ... </div> <div> <img src ='../images/sarkozi.jpg' class='gauche'> <img src ='../images/hollande.jpg' class='gauche'> <p class ="gauche">Blabla ... <br>blabla ... ... </div> ...

Les deux premières images se positionnent côte à côte ; c'est le comportement normal d'éléments "inline".

Les deux suivantes sont centrées horizontalement puisque on appelle la classe "centrage".

Les cinquième et sixième images sont incluses dans le container figure qui est nativement de type "block".

Les quatre dernières images "flottent" à gauche ou à droite dans leur boîte parente (emploi de la propriété float : left /right).
On peut faire "flotter" plusieurs images dans une même boîte comme vous pouvez le constater dans le dernier DIV.
Retour menu