Kuinka asettaa kuvan sijainti CSS:ssä?

Kehittäjät asettivat kuvan sijainnin selkeän visuaalisen hierarkian luomiseksi määrittämällä kuvan järjestyksen ja mitat suhteessa muihin HTML-elementteihin. Sijoittamalla kuva eri paikkoihin voidaan myös luoda moderneja, ainutlaatuisia ja mukautettuja malleja, jotka voivat muuttaa verkkosivuston ulkoasua ja tuntumaa. Tämä artikkeli esittelee menetelmän kuvan sijainnin määrittämiseksi CSS:n avulla.

- Float Property -ominaisuuden käyttäminen
- Objektin sijainti -ominaisuuden käyttäminen

Kuinka asettaa kuvan sijainti CSS:ssä?

Asettamalla kuvan sijainnin CSS:ssä, hyödyt, kuten ' tarkka sijoitus ”, “ päällekkäinen elementti ' ja ' responsiivinen muotoilu ” voidaan saavuttaa helposti. Näitä etuja käyttämällä kehittäjät voivat helposti muokata ja rakentaa täysin toimivan ja katseenvangitsijan verkkosivuston. On kaksi tapaa/ominaisuutta, joilla kuvan sijainti voidaan asettaa. Nämä ominaisuudet kuvataan alla:

Tapa 1: Float-ominaisuuden käyttäminen

' kellua '-ominaisuuden tarjoaa CSS HTML-elementtien liikkumista varten ' vasemmalle ' tai ' oikein ” suunta. Sitä käytetään enimmäkseen luotaessa reagoivaa asettelua HTML-elementtien tarkkaa sijoittamista varten.

Esimerkiksi 'float'-ominaisuutta käytetään kuvien kohdistamiseen sekä verkkosivun vasemmalla että oikealla puolella:

< div >
< img src = 'bg.jpg' korkeus = '300px' leveys = '400px' luokkaa = 'sijaintioikea' >
< img src = 'kirja.jpg' korkeus = '300px' leveys = '400px' luokkaa = 'sijainti vasen' >
div >

Yllä olevassa koodissa:

- Ensinnäkin juuri ' div ”-elementti luodaan, joka toimii HTML-elementtien säilönä.
- Seuraavaksi kaksi' ' -tunnisteita käytetään '
  ' -tunniste.
- Sen jälkeen arvot ' 300 pikseliä ' ja ' 400 pikseliä ' toimitetaan ' korkeus ' ja ' leveys 'molempien attribuutit' ”tunnisteet.
- Määritä myös luokka ' sijaintiOikea ' ja ' sijainti Vasen ' ensimmäiseen ja toiseen ' '-tunnisteeseen, vastaavasti.

Kirjoita nyt ' ' -tunnisteen avulla seuraavat CSS-ominaisuudet:

< tyyli >
.positionRight {
kellua: oikea;
}
.positionLeft {
kellua: vasen;
}
tyyli >

Kuvaus annetaan alla:

- Valitse ensin ' sijaintiOikea ' luokka ja aseta arvo oikein ' sen ' kellua ” omaisuutta. Tämä siirtää valitun HTML-elementin oikeaan suuntaan verkkosivulla.
- Valitse seuraavaksi ' sijainti Vasen luokka ja anna arvo vasemmalle ' kohtaan ' kellua ” omaisuutta. Tämä siirtää elementin siirtymään vasemmalle puolelle.

Kokoonpanovaiheen päätyttyä:

Tulos näyttää, että kuvat on asetettu vasemmalle ja oikealle.

Tapa 2: Objektin sijainti -ominaisuuden käyttäminen

' objektin sijainti ”-ominaisuus varmistaa kuvan tai HTML-elementin sijoittamisen tiettyyn kohtaan verkkosivulla. Se antaa hallinnan vaaka- ja pystysuunnassa, jolloin käyttäjä voi saavuttaa halutun visuaalisen tehosteen tai asettelun. Kehittäjät käyttävät sitä enimmäkseen kuvien rajaamiseen, pikkukuvien luomiseen, mukautettuihin asetteluihin jne.

Tämä ominaisuus voi ottaa sekä numeerisia että avainsana-arvoja. Esimerkiksi sekä numeeriset että avainsanaarvot tarjotaan ' objektin sijainti ” omaisuutta. Se määrittää kuvan sijainnin CSS:ssä alla olevassa koodinpätkässä:

< tyyli >
.numericalValues
{
objektin sijainti: 100px 20px;
}
.keywordValues
{
objektin sijainti: vasen;
}
tyyli >
< kehon >
< div >
< img src = 'kirja.jpg' korkeus = '300px' leveys = '400px' luokkaa = 'avainsanaarvot' >
< img src = 'bg.jpg' korkeus = '300px' leveys = '400px' luokkaa = 'numeeriset arvot' >
div >
kehon >

Yllä olevassa koodinpätkässä:

- Ensinnäkin ' numeeriset arvot ' luokka on valittu ' ' -tunniste. Ja numeroarvot ' 100px 20px ' toimitetaan CSS:lle' objektin sijainti ” omaisuutta. ' 100 pikseliä ' on vaakasuunnassa lisätty tila ja ' 20px ” pystysuoralle.
- Seuraavaksi ' avainsanaarvot ' luokka on valittuna ja avainsanan arvo ' vasemmalle ' toimitetaan ' objektin sijainti ”-ominaisuutta kohdistaaksesi kuvan vasempaan suuntaan.
- Sen jälkeen sisällä ' ” tagilla luodaan kaksi kuvaa, ja niille osoitetaan yllä luodut luokat.

Kokoamisvaiheen päätyttyä verkkosivu näyttää tältä:

Tilannekuva osoittaa, että kuvat on nyt asetettu tiettyihin paikkoihin.

Johtopäätös

Kuvan sijainti voidaan asettaa CSS:llä kellua ' ja ' objektin sijainti ” ominaisuuksia. ' kellua ”-ominaisuus ottaa avainsanan arvona ja siirtää elementin vasemmalle tai oikealle. Toisaalta ' esineen sijainti ”, ottaa sekä avainsana- että numeeriset arvot vaaka- ja pystysuunnassa. Tämä artikkeli on osoittanut prosessin kuvan sijainnin määrittämiseksi CSS:ssä.

Kuinka asettaa kuvan sijainti CSS:ssä?