Alignement d’image

Bienvenue dans l’alignement d’image ! La meilleure façon de démontrer le flux et le reflux des diverses options de positionnement des images est de les plonger dans un océan de mots. Alors hissez la gran’voile et en avant, c’est parti.

Concernant l’alignement, il est à noter que les utilisateurs peuvent choisir parmi les options aucun, à gauche, à droite et centré. De plus, les images peuvent avoir différentes dimensions : miniature, moyenne, grande & en plein écran.

Image Alignment 580x300

L’image au-dessus est centrée.

Image Alignment 150x150

Le reste de ce paragraphe est du simple remplissage pour voir le texte se disposer autour de l’image de 150 x 150, qui reste alignée à gauche.

Comme vous pouvez le voir il devrait y avoir de l’espace tout autour de l’image. Le texte ne devrait pas être collé à l’image. Les images ont aussi besoin d’air pour respirer. Laissez-les faire leur travail sans être gênées par le texte. Une phrase de plus, pour voir que le texte se positionne à la droite de l’image puis en dessous tout en douceur. Encore une fois, laissons faire les choses. Mission accomplie !

Et maintenant une image extrêmement grande. Et sans alignement.

Image Alignment 1200x400

L’image ci-dessus, malgré ses 1200 px de large, ne devrait pas sortir de la zone du contenu. Elle devrait restée contenu sans aucun problème dans le flow du contenu.

Image Alignment 300x200

Et maintenant tribord toute avec un alignement à droite. À nouveau il devrait y avoir suffisament d’espace au-dessus, en-dessous et à gauche de l’image. Ça semble tout bon tout ça. Et ne laissez personne vous dire le contraire.

Maintenant , vous devriez voir le texte commencé à glisser gentiment sous l’image alignée à droite. Il devrait toujours y avoir plein d’espace tout autour. Oui, juste comme ça… sinon appelez le dev !

Vous croyez en avoir terminé, et bien non, nous allons tout recommencer mais cette fois-ci avec les légendes !

Image Alignment 580x300
Cette image de 580×300 a une légende super originale.

L’image ci-dessus est centrée. La légende contient aussi un lien. Juste pour voir si cela ne produit rien de bizarre.

Image Alignment 150x150
tou’p’tite légende.

Le reste de ce paragraphe est du simple remplissage pour voir le texte se disposer autour de l’image de 150 x 150, qui reste alignée à gauche.

Comme vous pouvez le voir il devrait y avoir de l’espace tout autour de l’image. Le texte ne devrait pas être collé à l’image. Les images ont aussi besoin d’air pour respirer. Laissez-les faire leur travail sans être gênées par le texte. Une phrase de plus, pour voir que le texte se positionne à la droite de l’image puis en dessous tout en douceur. Encore une fois, laissons faire les choses. Mission accomplie !

Et maintenant une image extrêmement grande. Et sans alignement.

Image Alignment 1200x400
Une immense image pour le plaisir de vos yeux.

L’image ci-dessus, malgré ses 1200 px de large, ne devrait pas sortir de la zone du contenu. Elle devrait restée contenu sans aucun problème dans le flow du contenu.

Image Alignment 300x200
Trop bien vu, cet alignement à droite.

Et maintenant tribord toute avec un alignement à droite. À nouveau il devrait y avoir suffisament d’espace au-dessus, en-dessous et à gauche de l’image. Ça semble tout bon tout ça. Et ne laissez personne vous dire le contraire.

Maintenant , vous devriez voir le texte commencé à glisser gentiment sous l’image alignée à droite. Il devrait toujours y avoir plein d’espace tout autour. Oui, juste comme ça… sinon appelez le dev !

Et voilà jeune Jack Sparrow ! Vous avez survécu aux eaux tumultueuses de l’alignement. Vous pouvez passer au prochain test !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *