Obstaja veliko načinov za pozicioniranje slike v CSS, kot je uporaba položaj objekta lastnine, z uporabo lebdi lastnost (za poravnavo elementov v levo ali desno).
Z uporabo lastnosti položaja objekta
The položaj objekta Lastnost v CSS določa poravnavo vsebine znotraj vsebnika. Uporablja se z prileganje objektu lastnost za definiranje, kako element kot oz je v svojem polju z vsebino postavljen s koordinatami x/y.
java doda niz
Pri uporabi prileganje objektu lastnost, privzeta vrednost za položaj objekta je 50 % 50 % , zato so vse slike privzeto postavljene na sredino polja z vsebino. Privzeto poravnavo lahko spremenimo z uporabo položaj objekta premoženje.
Sintaksa
object-position: | initial | inherit;
The položaj vrednost položaj objekta lastnost določa položaj videa ali slike znotraj vsebnika. Sprejema dve številski vrednosti, pri čemer prva vrednost nadzoruje os x, druga vrednost pa nadzoruje os y. Uporabimo lahko niz kot je npr levo desno , oz center , itd. za namestitev slike v vsebnik. Omogoča negativne vrednosti.
To lahko bolj jasno razumemo z nekaj primeri.
Primer
V tem primeru uporabljamo vrednosti niza, kot je 'desno zgoraj', 'sredina zgoraj', in 'levo zgoraj' za položaj slike.
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> Preizkusite zdaj Izhod
Tukaj je še en primer uporabe položaj objekta premoženje.
java stikalo int
Primer
V tem primeru uporabljamo začetnica vrednost, ki je sliko postavila na sredino. To je zato, ker začetnica nastavi lastnost na privzeto vrednost, ki je 50 % 50 % . Uporabljamo tudi številčne vrednosti 200 slikovnih pik in 100 slikovnih pik .
rojen freddie mercury
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> Preizkusite zdaj Izhod
Z uporabo lastnosti float
Lastnost CSS float je lastnost pozicioniranja, ki se uporablja za potiskanje elementa v levo ali desno, kar omogoča drugim elementom, da se ovijejo okoli njega. Na splošno se uporablja s slikami in postavitvami.
Elementi lebdijo le vodoravno. Tako je mogoče lebdeti elemente levo ali desno, ne pa gor ali dol. Lebdeči element se lahko premakne čim bolj v levo ali desno. To preprosto pomeni, da se lahko lebdeči element prikaže na skrajni levi ali skrajni desni strani.
Vzemimo primer uporabe lebdi premoženje.
Primer
CSS float property #left { float: left; } #right { float: right; } Preizkusite zdaj Izhod
