Det er mange metoder for å plassere bildet i CSS, for eksempel å bruke objekt-posisjon eiendom, ved hjelp av flyte egenskap (for å justere elementene til venstre eller høyre).
Ved å bruke egenskapen objektposisjon
De objekt-posisjon egenskap i CSS spesifiserer justeringen av innholdet i beholderen. Den brukes sammen med objekttilpasning egenskap for å definere hvordan et element liker eller er plassert med x/y-koordinater i innholdsboksen.
Når du bruker objekttilpasning egenskap, standardverdien for objekt-posisjon er 50 % 50 % , så som standard er alle bilder plassert i midten av innholdsboksen. Vi kan endre standardjusteringen ved å bruke objekt-posisjon eiendom.
Syntaks
object-position: | initial | inherit;
De posisjon verdien av objekt-posisjon egenskap definerer plasseringen av video eller bilde inne i beholderen. Den godtar to numeriske verdier, der den første verdien styrer x-aksen, og den andre verdien styrer y-aksen. Vi kan bruke strengen som f.eks venstre høyre , eller senter , etc. for å plassere bildet i beholderen. Det tillater negative verdier.
Vi kan forstå det klarere ved å bruke noen eksempler.
Eksempel
I dette eksemplet bruker vi strengverdiene som f.eks 'høyre øverst', 'senter øverst', og 'venstre topp' for å plassere bildet.
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> Test det nå Produksjon
Nå er det et annet eksempel på bruk av objekt-posisjon eiendom.
Eksempel
I dette eksemplet bruker vi første verdi som plasserte bildet i midten. Det er fordi initialen setter egenskapen til standardverdien som er 50 % 50 % . Vi bruker også numeriske verdier 200 piksler og 100 piksler .
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> Test det nå Produksjon
Ved å bruke flyteegenskapen
CSS-float-egenskapen er en posisjoneringsegenskap som brukes til å skyve et element til venstre eller høyre, slik at andre elementer kan vikle seg rundt det. Vanligvis brukes den med bilder og oppsett.
Elementer flyter kun horisontalt. Så det er bare mulig å flyte elementer til venstre eller høyre, ikke opp eller ned. Et flytende element kan flyttes så langt til venstre eller høyre som mulig. Det betyr ganske enkelt at et flytende element kan vises ytterst til venstre eller ytterst til høyre.
La oss ta et eksempel på bruk av flyte eiendom.
Eksempel
CSS float property #left { float: left; } #right { float: right; } Test det nå Produksjon
