Die Entwickler legen die Position eines Bildes fest, um eine klare visuelle Hierarchie zu schaffen, indem sie die Reihenfolge und Abmessungen des Bildes im Verhältnis zu anderen HTML-Elementen bestimmen. Durch die Platzierung des Bildes an verschiedenen Positionen können außerdem moderne, einzigartige und individuelle Designs generiert werden, die das Erscheinungsbild der Website verändern können. In diesem Artikel wird die Vorgehensweise zum Festlegen der Position eines Bildes mithilfe von CSS veranschaulicht.
Wie legt man die Position eines Bildes in CSS fest?
Durch das Festlegen der Position eines Bildes in CSS ergeben sich folgende Vorteile: präzise Platzierung “, „ überlappendes Element ' Und ' sich anpassendes Design “ kann leicht erreicht werden. Mithilfe dieser Vorteile können Entwickler ganz einfach eine voll funktionsfähige und ansprechende Website anpassen und erstellen. Es gibt zwei Methoden/Eigenschaften, mit denen die Position eines Bildes festgelegt werden kann. Diese Eigenschaften werden im Folgenden beschrieben:
Methode 1: Verwenden der Float-Eigenschaft
Der ' schweben Die Eigenschaft „“ wird vom CSS für die Bewegung von HTML-Elementen im „“ bereitgestellt. links ' oder ' Rechts ” Richtung. Es wird hauptsächlich bei der Erstellung des responsiven Layouts für die präzise Platzierung der HTML-Elemente verwendet.
Beispielsweise wird die Eigenschaft „float“ verwendet, um Bilder sowohl auf der linken als auch auf der rechten Seite der Webseite auszurichten:
< div >
< Bild src = 'bg.jpg' Höhe = „300px“ Breite = „400px“ Klasse = „positionRight“ >
< Bild src = „book.jpg“ Höhe = „300px“ Breite = „400px“ Klasse = „positionLeft“ >
div >
Im obigen Code:
-
- Zuerst die Wurzel „ div Es wird ein Element erstellt, das als Container für HTML-Elemente fungiert.
- Als nächstes zwei „
”-Tags werden innerhalb der „
' Schild.- Danach sind die Werte von „ 300px ' Und ' 400px ” werden dem „ zur Verfügung gestellt Höhe ' Und ' Breite „Attribute beider“
' Stichworte.
- Weisen Sie außerdem eine Klasse von „ zu positionRight ' Und ' positionLeft ” zum ersten bzw. zweiten „
“-Tag.
Geben Sie nun „
< Stil >”-Tag, um die folgenden CSS-Eigenschaften anzuwenden:
.positionRight {
schweben rechts;
}
.positionLeft {
schweben: links;
}
Stil >
Nachfolgend finden Sie die Beschreibung:
-
- Wählen Sie zunächst „ positionRight ”-Klasse und legen Sie den Wert von „ fest Rechts ” zu seinem „ schweben ' Eigentum. Dadurch wird das ausgewählte HTML-Element auf der Webseite in die richtige Richtung verschoben.
- Wählen Sie als Nächstes „ positionLeft ” Klasse und geben Sie den Wert von „ links ' zum ' schweben ' Eigentum. Dadurch wird das Element nach links verschoben.
Nach Abschluss der Kompilierungsphase:
Die Ausgabe zeigt, dass Bilder auf die linke und rechte Position eingestellt wurden.Methode 2: Verwenden der Objektpositionseigenschaft
Der ' Objektposition Die Eigenschaft sorgt dafür, dass das Bild oder HTML-Element an einer bestimmten Position auf der Webseite platziert wird. Es ermöglicht die Kontrolle über die horizontale und vertikale Positionierung und ermöglicht dem Benutzer, den gewünschten visuellen Effekt oder das gewünschte Layout zu erzielen. Es wird hauptsächlich von Entwicklern zum Zuschneiden von Bildern, zum Erstellen von Miniaturansichten, benutzerdefinierten Layouts usw. verwendet.
Diese Eigenschaft kann sowohl numerische als auch Schlüsselwortwerte annehmen. Beispielsweise werden sowohl numerische Werte als auch Schlüsselwortwerte für „“ bereitgestellt. Objektposition ' Eigentum. Es legt die Position eines Bildes in CSS im folgenden Codeausschnitt fest:
< Stil >
.Zahlenwerte
{
Objektposition: 100px 20px;
}
.keywordValues
{
Objektposition: links;
}
Stil >
< Körper >
< div >
< Bild src = „book.jpg“ Höhe = „300px“ Breite = „400px“ Klasse = „keywordValues“ >
< Bild src = 'bg.jpg' Höhe = „300px“ Breite = „400px“ Klasse = 'Zahlenwerte' >
div >
Körper >
Im obigen Codeausschnitt:-
- Zuerst die ' Zahlenwerte Die Klasse „“ wird innerhalb der „Klasse“ ausgewählt.
' Schild. Und die Zahlenwerte von „ 100px 20px „werden dem CSS zur Verfügung gestellt“ Objektposition ' Eigentum. Der ' 100px ” ist der in horizontaler Richtung hinzugefügte Raum und das „ 20px ” für die Vertikale. - Als nächstes wird das „ Schlüsselwortwerte Die Klasse „“ ist ausgewählt und der Schlüsselwortwert „ links ” wird bereitgestellt an die „ Objektposition ”-Eigenschaft, um das Bild nach links auszurichten.
- Danach, innerhalb der „
Mit dem „Tag“ werden zwei Bilder erstellt und ihnen werden die oben erstellten Klassen zugewiesen.
- Zuerst die ' Zahlenwerte Die Klasse „“ wird innerhalb der „Klasse“ ausgewählt.
Nach Abschluss der Kompilierungsphase sieht die Webseite folgendermaßen aus:
Der Schnappschuss verdeutlicht, dass die Bilder nun auf bestimmte Positionen eingestellt sind.Abschluss
Die Position eines Bildes kann per CSS festgelegt werden „ schweben ' Und ' Objektposition ' Eigenschaften. Der ' schweben Die Eigenschaft „nimmt das Schlüsselwort als Wert und verschiebt das Element an die linke oder rechte Position. Andererseits ist die „ Objektposition “, nimmt sowohl Schlüsselwort- als auch numerische Werte in horizontaler und vertikaler Richtung an. In diesem Artikel wurde die Vorgehensweise zum Festlegen der Position eines Bildes in CSS demonstriert.
- Danach sind die Werte von „ 300px ' Und ' 400px ” werden dem „ zur Verfügung gestellt Höhe ' Und ' Breite „Attribute beider“