Es gibt viele Methoden, das Bild in CSS zu positionieren, z. B. die Verwendung von Objektposition Eigentum, unter Verwendung der schweben Eigenschaft (zum Ausrichten der Elemente nach links oder rechts).

Durch Verwendung der Objektpositionseigenschaft

Der Objektposition Die Eigenschaft in CSS gibt die Ausrichtung des Inhalts innerhalb des Containers an. Es wird mit dem verwendet Objektgerecht Eigenschaft, um zu definieren, wie ein Element wie oder aussieht wird mit x/y-Koordinaten in seinem Inhaltsfeld positioniert.

Bei Verwendung des Objektgerecht Eigenschaft, der Standardwert für Objektposition Ist 50 % 50 % Daher werden alle Bilder standardmäßig in der Mitte ihres Inhaltsfelds positioniert. Wir können die Standardausrichtung ändern, indem wir die verwenden Objektposition Eigentum.

Syntax

 object-position: | initial | inherit; 

Der Position Wert der Objektposition Die Eigenschaft definiert die Position des Videos oder Bildes innerhalb des Containers. Es akzeptiert zwei numerische Werte, wobei der erste Wert die x-Achse und der zweite Wert die y-Achse steuert. Wir können die Zeichenfolge verwenden, z links rechts , oder Center usw. zur Positionierung des Bildes im Container. Es erlaubt negative Werte.

Anhand einiger Beispiele können wir es besser verstehen.

Beispiel

In diesem Beispiel verwenden wir Zeichenfolgenwerte wie: 'rechts oben', 'Mitte oben', Und 'links oben' um das Bild zu positionieren.

 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> 

Ausgabe

Nun gibt es ein weiteres Beispiel für die Verwendung von Objektposition Eigentum.

Beispiel

In diesem Beispiel verwenden wir die anfänglich Wert, der das Bild in der Mitte positioniert. Dies liegt daran, dass die Initiale die Eigenschaft auf ihren Standardwert setzt 50 % 50 % . Wir verwenden auch die Zahlenwerte 200px Und 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> 

Ausgabe

Durch die Verwendung der Float-Eigenschaft

Die CSS-Eigenschaft „float“ ist eine Positionierungseigenschaft, mit der ein Element nach links oder rechts verschoben wird, sodass andere Elemente es umschließen können. Im Allgemeinen wird es mit Bildern und Layouts verwendet.

Elemente werden nur horizontal verschoben. Es ist also nur möglich, Elemente nach links oder rechts zu verschieben, nicht nach oben oder unten. Ein schwebendes Element kann so weit wie möglich nach links oder rechts verschoben werden. Einfach ausgedrückt bedeutet dies, dass ein schwebendes Element ganz links oder ganz rechts angezeigt werden kann.

Nehmen wir ein Beispiel für die Verwendung von schweben Eigentum.

Wo ist die Einfügetaste auf der Laptoptastatur?

Beispiel

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

Ausgabe