Comment positionner correctement plusieurs photos dans du texte ?

Prenons l'exemple suivant : vous voulez mettre deux images sur une même ligne, ces deux images ne faisant pas la même taille. Pour que le résultat soit esthétique, il faut que sur le site :

• La hauteur des images soit le même
• Un petit espace sépare les deux images
• Les deux images soient centrées dans le corps de la page.

Je vais vous réaliser un exemple avec une image horizontale, et une verticale, donc deux images de taille différente. Le résultat à obtenir est celui présenté dans  l'affichage ci-dessous :

Insertion des images dans le texte

Vous devez d'abord insérer vos deux images pour qu'elles soient présentes à l'écran, en prenant bien soin de laisser un petit espace entre les deux. Suivez les instructions de l'image ci-dessous.

Si vos images sont plus grandes, il se peut qu'elles ne soient pas côte-à-côte, mais l'une en dessous de l'autre : ce n'est pas grave, vous allons corriger cela

Les deux images doivent avoir la même hauteur...

Une fois cette étape réalisée, vous remarquez que vos deux images ne sont pas de la même hauteur, ce qui ne donne pas un très beau résultat. Nous allons corriger ce défaut en réduisant la taille de l'image de gauche (la plus haute) : on réduit toujours la taille de la plus grande image, on n'agrandit pas une image car cela dégrade sa qualité.

Voici comment faire :

Si après cette opération vos deux images sont trop grandes pour tenir sur une seule ligne (il y en a toujours une en dessous de l'autre), réduisez encore la taille de vos deux images jusqu'à ce quelles tiennent dans l'espace d'affichage. Validez bien le rendu sur votre site Internet, car il peut être un peu différent de ce que vous voyez dans l'administration.

Centrage des images

Mise en place du cadre

Vos images sont de la même hauteur et bien centrée, on peut encore améliorer leur esthétique en mettant un petit cadre autour de chacune d'elle.

 Un fin liseret apparaît alors autour de votre image, donnant un effet d'encadrement. Répétez cette opération sur la seconde image pour lui mettre également un cadre.

Vous avez terminé votre opération. Vous pouvez procéder ainsi pour mettre côte à côte deux ou trois images, assurez-vous bien qu'elles aient la même hauteur pour que l'alignement soit parfait.