Udviklerne indstiller et billedes position for at etablere et klart visuelt hierarki ved at bestemme billedets rækkefølge og dimensioner i forhold til andre HTML-elementer. Ved at placere billedet i forskellige positioner kan der også genereres moderne, unikke og brugerdefinerede designs, som kan ændre udseendet og følelsen af hjemmesiden. Denne artikel demonstrerer proceduren for indstilling af et billedes position ved hjælp af CSS.
Hvordan indstiller man placeringen af et billede i CSS?
Ved at indstille placeringen af et billede i CSS vil fordelene som ' præcis placering ', ' overlappende element ' og ' responsivt design ” let kan opnås. Ved at bruge disse fordele kan udviklerne nemt tilpasse og bygge et fuldt funktionelt og iøjnefaldende websted. Der er to metoder/egenskaber, hvormed positionen af et billede kan indstilles. Disse egenskaber er beskrevet nedenfor:
Metode 1: Brug af Float Property
Det ' flyde ' egenskaben leveres af CSS til flytning af HTML-elementer i ' venstre ' eller ' højre ” retning. Det bruges for det meste, mens du skaber det responsive layout til den præcise placering af HTML-elementerne.
For eksempel bruges egenskaben 'float' til at justere billeder på både venstre og højre side af websiden:
< div >
< img src = 'bg.jpg' højde = '300px' bredde = '400px' klasse = 'position højre' >
< img src = 'bog.jpg' højde = '300px' bredde = '400px' klasse = 'position Venstre' >
div >
I ovenstående kode:
-
- For det første roden ' div ” element oprettes, der fungerer som en beholder til HTML-elementer.
- Dernæst to '
' tags bruges i '
” tag.- Derefter vil værdierne af ' 300 px ' og ' 400px ” gives til ” højde ' og ' bredde ' attributter for begge '
” tags.
- Tildel også en klasse på ' position Højre ' og ' position Venstre ” til henholdsvis det første og andet “
”-tag.
Indtast nu '
< stil >” tag for at anvende følgende CSS-egenskaber:
.position Højre {
flyde: højre;
}
.position Venstre {
flyde: venstre;
}
stil >
Beskrivelsen er givet nedenfor:
-
- Først skal du vælge ' position Højre ' klasse og indstil værdien af ' højre 'til sin' flyde ” ejendom. Dette flytter det valgte HTML-element i den rigtige retning på websiden.
- Vælg derefter ' position Venstre ' klasse og angive værdien af ' venstre ' til ' flyde ” ejendom. Dette flytter elementet til at bevæge sig mod venstre side.
Efter afslutningen af kompileringsfasen:
Outputtet viser, at billeder er blevet indstillet til venstre og højre position.Metode 2: Brug af objekt-position egenskab
Det ' objekt-position ” egenskab sikrer placeringen af billedet eller HTML-elementet på en bestemt position på websiden. Det giver kontrol over den vandrette og lodrette positionering, så brugeren kan opnå den ønskede visuelle effekt eller layout. Det bruges for det meste af udviklere til billedbeskæring, oprettelse af miniaturer, brugerdefinerede layouts osv.
Denne egenskab kan have både numeriske værdier og søgeordsværdier. For eksempel er både numeriske og søgeordsværdier angivet for ' objekt-position ” ejendom. Det indstiller placeringen af et billede i CSS i nedenstående kodestykke:
< stil >
.numericalValues
{
objekt-position: 100px 20px;
}
.keywordValues
{
objekt-position: venstre;
}
stil >
< legeme >
< div >
< img src = 'bog.jpg' højde = '300px' bredde = '400px' klasse = 'keywordValues' >
< img src = 'bg.jpg' højde = '300px' bredde = '400px' klasse = 'numeriske værdier' >
div >
legeme >
I ovenstående kodestykke:-
- For det første ' numeriske værdier ' klasse er valgt i '
” tag. Og de numeriske værdier af ' 100px 20px ' leveres til CSS ' objekt-position ” ejendom. Det ' 100 px ” er pladsen tilføjet i vandret retning og ” 20 px ” for lodret. - Dernæst ' søgeordsværdier ' klasse er valgt, og søgeordsværdien for ' venstre ” gives til ” objekt-position ” egenskab for at justere billedet mod venstre.
- Derefter inde i ' ” tag to billeder oprettes, og de ovenfor oprettede klasser tildeles dem.
- For det første ' numeriske værdier ' klasse er valgt i '
Efter afslutningen af kompileringsfasen ser websiden sådan ud:
Snapshottet illustrerer, at billederne nu er sat til bestemte positioner.Konklusion
Placeringen af et billede kan indstilles ved hjælp af CSS ' flyde ' og ' objekt-position ' ejendomme. Det ' flyde ” egenskab tager nøgleordet som en værdi og flytter elementet i venstre eller højre position. På den anden side er ' objekt-position ”, tager både nøgleord og numeriske værdier i vandret og lodret retning. Denne artikel har demonstreret proceduren for indstilling af et billedes position i CSS.
- Derefter vil værdierne af ' 300 px ' og ' 400px ” gives til ” højde ' og ' bredde ' attributter for begge '