CSS :disposer les images dans une page

Disposition par défaut des images

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; } ... <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 à 50% de celle du conteneur.

Nouvelle technique : emploi de la balise FIGURE

Réservé aux adultes
Interdit aux mineurs

Le code CSS & HTML correspondant

... figure { width : 50% ; margin :10px auto 10px auto;} figure img {width : 80% ; margin :auto; } figcaption {text-align :center ; } ... <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> ...

Le HTML5 a introduit les balises figure et figcaption pour mieux afficher les médias (images, vidéos).
FIGURE est une balise nativement de type block.
La balise FIGCAPTION permet de légender un média positionné avec FIGURE

Positionner une image ou plusieurs images "inline" dans son conteneur à gauche ou à droite

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

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


Le code CSS & HTML correspondant

... img.gauche {height :150px ; float : left ; margin : 1% ; } img.droite {height:150px ; float : right ; margin : 1% ; } ... <div> <img src ='../images/seins_nus.jpg' class='gauche'> <p>Blabla ...<br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </div> <br> <div> <img src ='../images/latino_bikini.jpg' class='droite'> <img src ='../images/noire_bikini.jpg' class='droite'> <p>Blabla ... <br>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
Remarquez que les images débordent de leur boite !

Attention par défaut une boite adapte sa hauteur au texte contenu et non pas par rapport à la hauteur de l'image.
La solution : donner une hauteur minimale à chaque boite DIV, par exemple min-height : 150px

Déformer les images

Si vous utilisez la balise IMG avec la propriété width le navigateur calcule la hauteur d'affichage pour respecter les proportions d'origine et vice-versa si vous appliquez la propriété height.

Les dimensions natives de l'image trikini.jpg sont 700 par 1000 donc un ratio de 0,7 entre largeur et hauteur.

Le code correspondant

... <img src ='../images/trikini.jpg' width ="200" height ="150"> ...

L'image est déformée ! Le ration entre largeur et hauteur est en effet de 1,3 (200/150)!

Souvent la déformation d'image est involontaire et résulte d'un code CSS inapproprié.
Par exemple la hauteur des images fixée dans la feuille de style externe puis largeur fixée dans le cadre d'une feuille de style interne. Et ces deux dimensions combinées ne respectent pas les proportions d'origine de l'image.

Pour éviter une déformation des images

Heureusement il y a une solution. Vous pouvez demander à CSS de recalculer la hauteur (ou la largeur) en fonction de la nouvelle largeur (ou hauteur définie).
Il faut donc écrire : height : auto OU width : auto
Voir exemple

Dans les deux première boites les images sont déformées.
Dans les deux dernières boites les proportions sont respectées.

La feuille de style de l'exemple

img {display : inline ; width : 30%; } img.bug {height : 150px ; float : left; margin : 10px;} img.ok {height : 150px ; width : auto; float : left; margin : 10px;} div {border:1px solid black ; margin :10px auto 10px auto; min-height : 180px; }

Le code HTML de l'exemple

... <div> <img src ='../images/noire_bikini.jpg' class ="bug" > <p>Blabla ...<br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </div> <div> <img src ='../images/latino_bikini.jpg' class="bug"> <p>Blabla ...<br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </div> <h2>Images correctes</h2> <div> <img src ='../images/noire_bikini.jpg' class ="ok" > <p>Blabla ...<br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </div> <div> <img src ='../images/latino_bikini.jpg' class="ok"> <p>Blabla ...<br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </div> ...

Donc si on applique la classe "bug" à une image elle aura une largeur de 30% de celle de son parent et une hauteur de 150 pixels.
Par contre si on applique la classe "ok" l'image aura une hauteur de 150px mais la largeur sera recalculée pour respecter les proportions.
Retour menu