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> Testaa nyt 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> Testaa nyt 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; } Testaa nyt Lähtö
