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 la base ! 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 : 50%; margin :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.
Les deux images sont collées ; c'est normal puiqu'il n'est pas prévu de marges haut et bas. Il aurait fallu écrire : margin : 10px auto 10px auto

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

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 dans sa boîte à gauche ou à droite

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

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

Le code CSS & HTML correspondant

img.gauche {width :15% ; float : left ; margin : 1% ; } img.droite {width: 15% ; 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 ... <br>blabla ... </p> </div> <div> <img src ='../images/bikini.jpg' class='droite'> <img src ='../images/trikini.jpg' class='droite'> <p>Blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... <br>blabla ... </p> </div>

Pour placer un élément inline dans une boite il faut utiliser la propriété float : left / right
Remarquez que l'une des image déborde de la boite.

Attention par défaut une boite adapte sa hauteur au texte et non pas à la hauteur de l'image.

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 inaproprié. Par exemple la hauteur des images fixée dans la feuille de style externe puis largeur fixée dans la feuille de style interne. Et ces deux dimensions combinées ne respectent pas les proportions d'origine de l'image.
Retour menu