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š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š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švestis