Il existe de nombreuses méthodes pour positionner l'image en CSS, comme l'utilisation du position de l'objet propriété, en utilisant le flotter propriété (pour aligner les éléments à gauche ou à droite).

En utilisant la propriété object-position

Le position de l'objet La propriété en CSS spécifie l'alignement du contenu dans le conteneur. Il est utilisé avec le ajustement à l'objet propriété pour définir comment un élément comme ou est positionné avec les coordonnées x/y dans sa zone de contenu.

Lors de l'utilisation du ajustement à l'objet propriété, la valeur par défaut pour position de l'objet est 50% 50% , donc, par défaut, toutes les images sont positionnées au centre de leur zone de contenu. Nous pouvons modifier l'alignement par défaut en utilisant le position de l'objet propriété.

Syntaxe

 object-position: | initial | inherit; 

Le position valeur de la position de l'objet La propriété définit la position de la vidéo ou de l’image à l’intérieur du conteneur. Il accepte deux valeurs numériques, la première valeur contrôlant l'axe des x et la seconde valeur contrôlant l'axe des y. Nous pouvons utiliser la chaîne telle que gauche droite , ou centre , etc. pour positionner l'image dans le conteneur. Il autorise les valeurs négatives.

Nous pouvons le comprendre plus clairement en utilisant quelques exemples.

Exemple

Dans cet exemple, nous utilisons les valeurs de chaîne telles que 'en haut à droite', 'au centre en haut', et 'en haut à gauche' pour positionner l'image.

 CSS object-position property #center { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: center top; } #left { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: left top; } #right { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: right top; } <h3>object-position: center top;</h3> <h3>object-position: left top;</h3> <h3>object-position: right top;</h3> 

Sortir

Maintenant, il existe un autre exemple d'utilisation du position de l'objet propriété.

Exemple

Dans cet exemple, nous utilisons le initial valeur qui a positionné l’image au centre. C'est parce que l'initiale définit la propriété à sa valeur par défaut qui est 50% 50% . Nous utilisons également les valeurs numériques 200px et 100px .

 CSS object-position property #num { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: 200px 100px; } #init { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: initial; } <h3>object-position: 200px 100px;</h3> <h3>object-position: initial;</h3> 

Sortir

En utilisant la propriété float

La propriété CSS float est une propriété de positionnement utilisée pour pousser un élément vers la gauche ou la droite, permettant ainsi à d'autres éléments de s'enrouler autour de lui. Généralement, il est utilisé avec des images et des mises en page.

Les éléments flottent uniquement horizontalement. Il est donc possible uniquement de faire flotter les éléments vers la gauche ou la droite, pas vers le haut ou vers le bas. Un élément flottant peut être déplacé le plus à gauche ou à droite possible. Simplement, cela signifie qu'un élément flottant peut s'afficher à l'extrême gauche ou à l'extrême droite.

Prenons un exemple d'utilisation du flotter propriété.

Exemple

 CSS float property #left { float: left; } #right { float: right; } 

Sortir