Utviklerne setter posisjonen til et bilde for å etablere et klart visuelt hierarki ved å bestemme rekkefølgen og dimensjonene til bildet i forhold til andre HTML-elementer. Ved å plassere bildet i ulike posisjoner kan det også genereres moderne, unike og tilpassede design som kan endre utseendet og følelsen til nettstedet. Denne artikkelen viser fremgangsmåten for å angi posisjonen til et bilde ved hjelp av CSS.
Hvordan angi posisjonen til et bilde i CSS?
Ved å angi posisjonen til et bilde i CSS, vil fordelene som ' nøyaktig plassering ', ' overlappende element ' og ' responsiv utforming ' kan enkelt oppnås. Ved å bruke disse fordelene kan utviklerne enkelt tilpasse og bygge et fullt funksjonelt og iøynefallende nettsted. Det er to metoder/egenskaper som posisjonen til et bilde kan brukes til. Disse egenskapene er beskrevet nedenfor:
Metode 1: Bruke Float Property
« flyte '-egenskapen leveres av CSS for flytting av HTML-elementer i ' venstre ' eller ' Ikke sant ' retning. Det brukes for det meste mens du lager det responsive oppsettet for nøyaktig plassering av HTML-elementene.
For eksempel brukes 'float'-egenskapen for å justere bilder på både venstre og høyre side av nettsiden:
< div >
< img src = 'bg.jpg' høyde = '300px' bredde = '400px' klasse = 'posisjon Høyre' >
< img src = 'bok.jpg' høyde = '300px' bredde = '400px' klasse = 'posisjon Venstre' >
div >
I koden ovenfor:
-
- Først roten ' div ”-elementet er opprettet som fungerer som en beholder for HTML-elementer.
- Deretter to '
'-tagger brukes i '
' stikkord.- Etter det vil verdiene til ' 300 piksler ' og ' 400 piksler ' gis til ' høyde ' og ' bredde ' attributter for begge '
'-tagger.
- Tildel også en klasse med ' posisjon Høyre ' og ' posisjon Venstre ' til henholdsvis den første og andre '
'-koden.
Nå, skriv inn '
< stil >'-taggen for å bruke følgende CSS-egenskaper:
.posisjonHøyre {
flyte: høyre;
}
.posisjon Venstre {
flyte: venstre;
}
stil >
Beskrivelsen er gitt nedenfor:
-
- Først velger du ' posisjon Høyre '-klassen og angi verdien til ' Ikke sant ' til dens ' flyte ' eiendom. Dette flytter det valgte HTML-elementet i riktig retning på nettsiden.
- Deretter velger du ' posisjon Venstre ' klasse og oppgi verdien av ' venstre ' til ' flyte ' eiendom. Dette flytter elementet til å bevege seg mot venstre side.
Etter slutten av kompileringsfasen:
Utgangen viser at bildene er satt til venstre og høyre posisjon.Metode 2: Bruke objektposisjonsegenskap
« objekt-posisjon ”-egenskapen sikrer plassering av bildet eller HTML-elementet på en bestemt plassering på nettsiden. Det gir kontroll over horisontal og vertikal posisjonering, slik at brukeren kan oppnå ønsket visuell effekt eller layout. Det brukes mest av utviklere for bildebeskjæring, lage miniatyrbilder, tilpassede oppsett, etc.
Denne egenskapen kan ha både numeriske verdier og søkeordverdier. For eksempel er både numeriske verdier og nøkkelordverdier oppgitt for ' objekt-posisjon ' eiendom. Den angir posisjonen til et bilde i CSS i kodebiten nedenfor:
< stil >
.numericalValues
{
objektposisjon: 100px 20px;
}
.keywordValues
{
objekt-posisjon: venstre;
}
stil >
< kropp >
< div >
< img src = 'bok.jpg' høyde = '300px' bredde = '400px' klasse = 'søkeordverdier' >
< img src = 'bg.jpg' høyde = '300px' bredde = '400px' klasse = 'numeriske verdier' >
div >
kropp >
I kodebiten ovenfor:-
- Først, ' numeriske verdier '-klassen er valgt i '
' stikkord. Og de numeriske verdiene til ' 100px 20px ' gis til CSS ' objekt-posisjon ' eiendom. « 100 piksler ' er mellomrommet lagt til i horisontal retning og ' 20 piksler ' for vertikalen. - Deretter ' nøkkelordverdier ' klasse er valgt og nøkkelordverdien for ' venstre ' er gitt til ' objekt-posisjon ”-egenskap for å justere bildet mot venstre retning.
- Etter det, inne i ' ” tag to bilder opprettes, og de ovenfor opprettede klassene blir tildelt dem.
- Først, ' numeriske verdier '-klassen er valgt i '
Etter slutten av kompileringsfasen ser nettsiden slik ut:
Øyeblikksbildet illustrerer at bildene nå er satt til bestemte posisjoner.Konklusjon
Posisjonen til et bilde kan stilles inn ved hjelp av CSS ' flyte ' og ' objekt-posisjon ' egenskaper. « flyte ” egenskap tar nøkkelordet som en verdi og flytter elementet i venstre eller høyre posisjon. På den annen side, ' objekt-posisjon ”, tar både nøkkelord og numeriske verdier i horisontal og vertikal retning. Denne artikkelen har vist fremgangsmåten for å angi posisjonen til et bilde i CSS.
- Etter det vil verdiene til ' 300 piksler ' og ' 400 piksler ' gis til ' høyde ' og ' bredde ' attributter for begge '