Comment définir la position d'une image en CSS ?

Comment Definir La Position D Une Image En Css



Les développeurs définissent la position d'une image pour établir une hiérarchie visuelle claire en déterminant l'ordre et les dimensions de l'image par rapport aux autres éléments HTML. En plaçant l'image dans diverses positions, des conceptions modernes, uniques et personnalisées peuvent également être générées, ce qui peut modifier l'apparence du site Web. Cet article explique la procédure de définition de la position d'une image à l'aide de CSS.

Comment définir la position d'une image en CSS ?

En définissant la position d'une image en CSS, les avantages tels que ' placement précis ”, “ élément superposé ' et ' conception réactive ” peut être facilement atteint. Grâce à ces avantages, les développeurs peuvent facilement personnaliser et créer un site Web entièrement fonctionnel et accrocheur. Il existe deux méthodes/propriétés par lesquelles la position d'une image peut être définie. Ces propriétés sont décrites ci-dessous :





Méthode 1 : Utilisation de la propriété Float

Le ' flotter ” est fournie par le CSS pour le déplacement des éléments HTML dans le “ gauche ' ou ' droite ' direction. Il est principalement utilisé lors de la création de la mise en page réactive pour le placement précis des éléments HTML.



Par exemple, la propriété 'float' est utilisée pour aligner les images sur les côtés gauche et droit de la page Web :



< div >
< image src = 'bg.jpg' hauteur = '300px' largeur = '400px' classe = 'position droite' >
< image src = 'livre.jpg' hauteur = '300px' largeur = '400px' classe = 'positionGauche' >
div >


Dans le code ci-dessus :



    • Tout d'abord, la racine ' div ” est créé et fonctionne comme un conteneur pour les éléments HTML.
    • Ensuite, deux ' Les balises ' sont utilisées à l'intérieur du '
      ' étiqueter.
    • Après cela, les valeurs de ' 300px ' et ' 400px » sont fournis au « hauteur ' et ' largeur 'attributs des deux' ' Mots clés.
    • Attribuez également une classe de ' positionDroite ' et ' positionGauche » aux première et deuxième balises « », respectivement.

Maintenant, entrez le '