Yra daug būdų, kaip nustatyti vaizdą CSS, pavyzdžiui, naudojant objektas-pozicija turtą, naudojant plūdė savybė (elementams išlygiuoti į kairę arba dešinę).
Naudojant objekto padėties savybę
The objektas-pozicija CSS savybė nurodo turinio išlygiavimą konteineryje. Jis naudojamas su tinkamas objektui ypatybė, skirta apibrėžti, kaip elementas patinka arba yra išdėstytas su x/y koordinatėmis turinio laukelyje.
Kai naudojate tinkamas objektui nuosavybė, numatytoji vertė objektas-pozicija yra 50% 50% , todėl pagal numatytuosius nustatymus visi vaizdai yra jų turinio laukelio centre. Numatytąjį lygiavimą galime pakeisti naudodami objektas-pozicija nuosavybė.
Sintaksė
object-position: | initial | inherit;
The poziciją vertė objektas-pozicija ypatybė apibrėžia vaizdo įrašo ar vaizdo vietą konteineryje. Ji priima dvi skaitines reikšmes, kur pirmoji reikšmė valdo x ašį, o antroji – y ašį. Galime naudoti tokią eilutę kaip kairė Dešinė , arba centras ir tt, kad būtų galima įdėti vaizdą konteineryje. Tai leidžia neigiamas vertes.
Mes galime tai aiškiau suprasti naudodami keletą pavyzdžių.
Pavyzdys
Šiame pavyzdyje mes naudojame eilutės reikšmes, tokias kaip „dešinysis viršus“, „centras viršuje“, ir 'kairėje viršuje' norėdami išdėstyti vaizdą.
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> Išbandykite dabar Išvestis
java miegas
Dabar yra dar vienas naudojimo pavyzdys objektas-pozicija nuosavybė.
git status -s
Pavyzdys
Šiame pavyzdyje mes naudojame pradinė vertė, kuri pastatė vaizdą centre. Taip yra todėl, kad pradinis nustato ypatybę į numatytąją vertę, kuri yra 50% 50% . Taip pat naudojame skaitines reikšmes 200 piks ir 100 piks .
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> Išbandykite dabar Išvestis
Naudodami plūdės savybę
CSS slankioji savybė yra padėties nustatymo ypatybė, naudojama elementui stumti į kairę arba dešinę, leidžiant kitiems elementams jį apvynioti. Paprastai jis naudojamas su vaizdais ir maketais.
Elementai plūduriuojami tik horizontaliai. Taigi galima tik plūduriuoti elementus į kairę arba dešinę, o ne aukštyn ar žemyn. Plūduriuojantis elementas gali būti perkeltas kuo toliau į kairę arba į dešinę. Paprasčiausiai tai reiškia, kad plūduriuojantis elementas gali būti rodomas kraštutinėje kairėje arba kraštutinėje dešinėje.
Paimkime naudojimo pavyzdį plūdė nuosavybė.
Pavyzdys
CSS float property #left { float: left; } #right { float: right; } Išbandykite dabar Išvestis
