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

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é :

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

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

Pour placer un élément "inline" dans une boite il faut utiliser la propriété float : left / right
Remarquez que 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 et solution

Si vous attribuez à un élément IMG la propriété width le navigateur calcule la hauteur d'affichage pour conserver les proportions d'origine et vice-versa si vous appliquez la propriété height.

Ci-dessous une image délibéremment déformée !
Les dimensions natives de l'image sont 700 par 1000 donc un ratio de 0,7 entre largeur et hauteur. disposer images dans une page

Or le Le code correspondant est le suivant :

L'image est déformée car on lui attribue une largeur mais aussi une hauteur. Donc le ratio entre largeur et hauteur est désormais de 1,3 (200/150)!

Le plus 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 (ou dans la balise via l'attribut style). Et ces deux dimensions combinées ne respectent pas les proportions d'origine.

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 dans la règle de style : 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

Notez bien dans la classe "ok" le width : auto.

Le code HTML de l'exemple

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