On monia tapoja sijoittaa kuva CSS:ään, kuten käyttämällä objektin sijainti omaisuutta käyttämällä kellua ominaisuus (elementtien kohdistamiseksi vasemmalle tai oikealle).

Käyttämällä objekti-sijaintiominaisuutta

The objektin sijainti ominaisuus CSS:ssä määrittää sisällön kohdistuksen säilön sisällä. Sitä käytetään kanssa esineeseen sopiva ominaisuus määrittääksesi kuinka elementti pitää tai on sijoitettu x/y-koordinaateilla sen sisältöruutuun.

Kun käytät esineeseen sopiva ominaisuuden oletusarvo objektin sijainti On 50 % 50 % , joten oletusarvoisesti kaikki kuvat on sijoitettu sisältöruudun keskelle. Voimme muuttaa oletuskohdistusta käyttämällä objektin sijainti omaisuutta.

Syntaksi

 object-position: | initial | inherit; 

The asema arvo objektin sijainti ominaisuus määrittää videon tai kuvan sijainnin säilön sisällä. Se hyväksyy kaksi numeerista arvoa, joista ensimmäinen arvo ohjaa x-akselia ja toinen arvo ohjaa y-akselia. Voimme käyttää merkkijonoa kuten vasen oikea , tai keskusta jne. kuvan sijoittamiseksi säiliöön. Se sallii negatiiviset arvot.

jasmine davis lapsena

Voimme ymmärtää sen selkeämmin käyttämällä joitain esimerkkejä.

Esimerkki

Tässä esimerkissä käytämme merkkijonoarvoja, kuten 'oikea yläosa', 'keskiylä', ja 'vasen yläosa' kuvan sijoittamiseksi.

virtuaalinen muisti

 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> 

Lähtö

Nyt on toinen esimerkki käyttämisestä objektin sijainti omaisuutta.

Esimerkki

Tässä esimerkissä käytämme alkukirjain arvo, joka sijoitti kuvan keskelle. Tämä johtuu siitä, että alkuasetus asettaa ominaisuuden oletusarvoonsa, joka on 50 % 50 % . Käytämme myös numeerisia arvoja 200 pikseliä ja 100 pikseliä .

Java-indeksi

 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> 

Lähtö

Käyttämällä float-ominaisuutta

CSS float -ominaisuus on paikannusominaisuus, jota käytetään elementin työntämiseen vasemmalle tai oikealle, jolloin muut elementit voivat kiertää sen ympärillä. Yleensä sitä käytetään kuvien ja asettelujen kanssa.

Elementit kelluvat vain vaakasuunnassa. Joten on mahdollista vain kellua elementtejä vasemmalle tai oikealle, ei ylös tai alas. Kelluvaa elementtiä voidaan siirtää niin pitkälle vasemmalle tai oikealle kuin mahdollista. Yksinkertaisesti se tarkoittaa, että kelluva elementti voi näkyä äärivasemmalla tai äärioikealla.

Otetaan esimerkki käytöstä kellua omaisuutta.

Esimerkki

 CSS float property #left { float: left; } #right { float: right; } 

Lähtö