Kuidas määrata pildi asukohta CSS-is?

Arendajad määravad pildi asukoha, et luua selge visuaalne hierarhia, määrates pildi järjekorra ja mõõtmed võrreldes teiste HTML-elementidega. Kujutise erinevatesse kohtadesse paigutamisel saab luua ka kaasaegseid, ainulaadseid ja kohandatud kujundusi, mis võivad muuta veebisaidi välimust ja tunnet. See artikkel tutvustab CSS-i abil pildi asukoha määramise protseduuri.

- Float Property kasutamine
- Objekti asukoha omaduse kasutamine

Kuidas määrata pildi asukohta CSS-is?

Kui määrate CSS-is pildi asukoha, saate selliseid eeliseid nagu ' täpne paigutus ”, “ kattuv element ” ja „ tundlik disain ” on lihtne saavutada. Neid eeliseid kasutades saavad arendajad hõlpsasti kohandada ja luua täielikult toimiva ja pilkupüüdva veebisaidi. Pildi asukoha määramiseks on kaks meetodit/atribuuti. Neid omadusi kirjeldatakse allpool:

1. meetod: ujukomaduse kasutamine

' ujuk atribuuti pakub CSS HTML-i elementide liikumiseks vasakule ” või „ õige ” suunda. Seda kasutatakse enamasti HTML-elementide täpse paigutuse jaoks tundliku paigutuse loomisel.

Näiteks atribuuti „ujumine” kasutatakse piltide joondamiseks nii veebilehe vasakus kui ka paremas servas:

< div >
< img src = 'bg.jpg' kõrgus = '300 pikslit' laius = '400 pikslit' klass = 'positsioon paremal' >
< img src = 'raamat.jpg' kõrgus = '300 pikslit' laius = '400 pikslit' klass = 'positsioon vasakpoolne' >
div >

Ülaltoodud koodis:

- Esiteks juur ' div ” luuakse element, mis töötab HTML-elementide konteinerina.
- Järgmiseks kaks ' '' sees kasutatakse silte
  ” silti.
- Pärast seda väärtused ' 300 pikslit ” ja „ 400 pikslit ' on esitatud ' kõrgus ” ja „ laius ' mõlema' atribuudid ” sildid.
- Samuti määrake klass ' asend paremal ” ja „ asend Vasak ” vastavalt esimesele ja teisele märgendile „ ”.

Nüüd sisestage ' ” märgend järgmiste CSS-i atribuutide rakendamiseks:

< stiilis >
.positsioonParemal {
ujuk: paremal;
}
.positsioon Vasak {
ujuk: vasak;
}
stiilis >

Kirjeldus on toodud allpool:

- Esmalt valige ' asend paremal ” klassi ja määrake „“ väärtus õige 'oma' ujuk ” vara. See liigutab valitud HTML-i elemendi veebilehel õiges suunas.
- Järgmisena valige ' asend Vasak ' klassi ja esitage väärtus ' vasakule ' juurde ' ujuk ” vara. See liigutab elementi vasakule poole.

Pärast koostamisfaasi lõppu:

Väljund näitab, et pildid on seatud vasakule ja paremale positsioonile.

2. meetod: objekti asukoha omaduse kasutamine

' objekt-positsioon ” atribuut tagab pildi või HTML-elemendi paigutuse veebilehel kindlale kohale. See annab kontrolli horisontaalse ja vertikaalse positsioneerimise üle, võimaldades kasutajal saavutada soovitud visuaalse efekti või paigutuse. Arendajad kasutavad seda enamasti piltide kärpimiseks, pisipiltide, kohandatud paigutuste jms loomiseks.

See atribuut võib võtta nii numbrilisi kui ka märksõnaväärtusi. Näiteks esitatakse nii numbrilised kui ka märksõna väärtused objekt-positsioon ” vara. See määrab pildi asukoha CSS-is allolevas koodilõigul:

< stiilis >
.numericalValues
{
objekti asukoht: 100px 20px;
}
.keywordValues
{
objekti asukoht: vasak;
}
stiilis >
< keha >
< div >
< img src = 'raamat.jpg' kõrgus = '300 pikslit' laius = '400 pikslit' klass = 'märksõna väärtused' >
< img src = 'bg.jpg' kõrgus = '300 pikslit' laius = '400 pikslit' klass = 'numbrilised väärtused' >
div >
keha >

Ülaltoodud koodilõigul:

- Esiteks, ' numbrilisedVäärtused ' klass on valitud jaotises ' ” silti. Ja numbrilised väärtused ' 100 pikslit 20 pikslit ' on esitatud CSS-ile' objekt-positsioon ” vara. ' 100 pikslit ” on horisontaalsuunas lisatud ruum ja „ 20 pikslit ” vertikaali jaoks.
- Järgmiseks ' märksõnaVäärtused ' klass on valitud ja märksõna väärtus ' vasakule ” on esitatud „ objekt-positsioon ” atribuut kujutise joondamiseks vasakpoolses suunas.
- Pärast seda, sees ' ” märgendiga luuakse kaks pilti ja neile määratakse ülaltoodud klassid.

Pärast koostamisfaasi lõppu näeb veebileht välja selline:

Pilt illustreerib, et pildid on nüüd seatud kindlatesse kohtadesse.

Järeldus

Pildi asukohta saab määrata CSS-i abil ujuk ” ja „ objekt-positsioon ” omadused. ' ujuk ” atribuut võtab märksõna väärtusena ja liigutab elementi vasakule või paremale. Teisest küljest ' objekt-positsioon ”, võtab nii märksõna kui ka arvväärtusi horisontaal- ja vertikaalsuunas. See artikkel on demonstreerinud CSS-is pildi asukoha määramise protseduuri.

Kuidas määrata pildi asukohta CSS-is?