De ontwikkelaars stellen de positie van een afbeelding in om een duidelijke visuele hiërarchie tot stand te brengen door de volgorde en afmetingen van de afbeelding ten opzichte van andere HTML-elementen te bepalen. Door de afbeelding in verschillende posities te plaatsen, kunnen ook moderne, unieke en op maat gemaakte ontwerpen worden gegenereerd die de look en feel van de website kunnen veranderen. Dit artikel demonstreert de procedure voor het instellen van de positie van een afbeelding met behulp van CSS.
Hoe stel ik de positie van een afbeelding in CSS in?
Door de positie van een afbeelding in CSS in te stellen, worden de voordelen zoals “ precieze plaatsing ”, “ overlappend element ' En ' reagerend ontwerp ” kan gemakkelijk worden bereikt. Met behulp van deze voordelen kunnen de ontwikkelaars eenvoudig een volledig functionele en opvallende website aanpassen en bouwen. Er zijn twee methoden/eigenschappen waarmee de positie van een afbeelding kan worden ingesteld. Deze eigenschappen worden hieronder beschreven:
Methode 1: Float-eigenschap gebruiken
De ' vlot ” eigenschap wordt geleverd door de CSS voor het verplaatsen van HTML-elementen in de “ links ' of ' rechts ” richting. Het wordt meestal gebruikt bij het maken van de responsieve lay-out voor de precieze plaatsing van de HTML-elementen.
De eigenschap 'zwevend' wordt bijvoorbeeld gebruikt voor het uitlijnen van afbeeldingen aan zowel de linker- als de rechterkant van de webpagina:
< div >
< img src = 'bg.jpg' hoogte = '300 pixels' breedte = '400 pixels' klas = 'positieRechts' >
< img src = 'boek.jpg' hoogte = '300 pixels' breedte = '400 pixels' klas = 'positieLinks' >
div >
In bovenstaande code:
-
- Eerst de wortel ' div ”-element gemaakt dat werkt als een container voor HTML-elementen.
- Vervolgens twee “
”-tags worden gebruikt in de “
' label.- Daarna zijn de waarden van ' 300px ' En ' 400px ” worden verstrekt aan de “ hoogte ' En ' breedte 'attributen van beide'
'labels.
- Wijs ook een klasse toe van ' positieRechts ' En ' positieLinks ” toe aan respectievelijk de eerste en tweede “
”-tag.
Voer nu de '
< stijl >”-tag om de volgende CSS-eigenschappen toe te passen:
.positieRechts {
vlotter: rechts;
}
.positieLinks {
zweven: links;
}
stijl >
De beschrijving wordt hieronder gegeven:
-
- Selecteer eerst de ' positieRechts ” class en stel de waarde in van “ rechts ' naar zijn ' vlot ' eigendom. Dit verplaatst het geselecteerde HTML-element in de juiste richting op de webpagina.
- Selecteer vervolgens de ' positieLinks ' klasse en geef de waarde van ' links ' naar de ' vlot ' eigendom. Hierdoor verplaatst het element zich naar de linkerkant.
Na het einde van de compilatiefase:
De uitvoer laat zien dat afbeeldingen zijn ingesteld op de linker- en rechterpositie.Methode 2: Objectpositie-eigenschap gebruiken
De ' object-positie ” eigenschap zorgt ervoor dat de afbeelding of het HTML-element op een specifieke positie op de webpagina wordt geplaatst. Het geeft controle over de horizontale en verticale positionering, waardoor de gebruiker het gewenste visuele effect of de gewenste lay-out kan bereiken. Het wordt meestal gebruikt door ontwikkelaars voor het bijsnijden van afbeeldingen, het maken van miniaturen, aangepaste lay-outs, enz.
Deze eigenschap kan zowel numerieke als trefwoordwaarden aannemen. Er worden bijvoorbeeld zowel numerieke als trefwoordwaarden verstrekt voor de ' object-positie ' eigendom. Het stelt de positie van een afbeelding in CSS in het onderstaande codefragment in:
< stijl >
.numerieke waarden
{
objectpositie: 100px 20px;
}
.trefwoordwaarden
{
object-positie: links;
}
stijl >
< lichaam >
< div >
< img src = 'boek.jpg' hoogte = '300 pixels' breedte = '400 pixels' klas = 'zoekwoordwaarden' >
< img src = 'bg.jpg' hoogte = '300 pixels' breedte = '400 pixels' klas = 'numerieke waarden' >
div >
lichaam >
In het bovenstaande codefragment:-
- Eerst de ' numerieke waarden ” klasse is geselecteerd in de “
' label. En de numerieke waarden van ' 100px 20px ” worden verstrekt aan de CSS “ object-positie ' eigendom. De ' 100px ” is de ruimte toegevoegd in de horizontale richting en de “ 20px ” voor de verticale. - Vervolgens de “ trefwoordWaarden ” klasse is geselecteerd en de trefwoordwaarde van “ links ” wordt verstrekt aan de “ object-positie ” eigenschap om de afbeelding naar links uit te lijnen.
- Daarna in de “
” tag twee afbeeldingen worden gemaakt en de hierboven gemaakte klassen worden eraan toegewezen.
- Eerst de ' numerieke waarden ” klasse is geselecteerd in de “
Na het einde van de compilatiefase ziet de webpagina er als volgt uit:
De momentopname illustreert dat de afbeeldingen nu op specifieke posities zijn ingesteld.Conclusie
De positie van een afbeelding kan worden ingesteld met behulp van CSS “ vlot ' En ' object-positie ' eigenschappen. De ' vlot ” eigenschap neemt het trefwoord als waarde en verplaatst het element naar links of rechts. Aan de andere kant, de “ object-positie ”, neemt zowel trefwoorden als numerieke waarden in horizontale en verticale richting. Dit artikel heeft de procedure gedemonstreerd voor het instellen van de positie van een afbeelding in CSS.
- Daarna zijn de waarden van ' 300px ' En ' 400px ” worden verstrekt aan de “ hoogte ' En ' breedte 'attributen van beide'