Számos módszer létezik a kép CSS-ben való elhelyezésére, például a tárgy-pozíció ingatlan használatával a úszó tulajdonság (az elemek balra vagy jobbra igazításához).

Az objektumpozíció tulajdonság használatával

A tárgy-pozíció tulajdonság a CSS-ben határozza meg a tartalom igazítását a tárolón belül. Használják a tárgyra illő tulajdonság annak meghatározására, hogy egy elem hogyan szereti a vagy x/y koordinátákkal van elhelyezve a tartalomdobozában.

Amikor a tárgyra illő tulajdonság, az alapértelmezett értéke tárgy-pozíció van 50% 50% , így alapértelmezés szerint az összes kép a tartalommező közepén helyezkedik el. Az alapértelmezett igazítást a gombbal módosíthatjuk tárgy-pozíció ingatlan.

Szintaxis

 object-position: | initial | inherit; 

A pozíció értéke a tárgy-pozíció tulajdonság határozza meg a videó vagy kép helyzetét a tárolóban. Két számértéket fogad el, ahol az első érték az x tengelyt, a második pedig az y tengelyt vezérli. Használhatjuk a karakterláncot, mint pl bal jobb , vagy központ stb. a kép elhelyezéséhez a tárolóban. Negatív értékeket tesz lehetővé.

Néhány példa segítségével érthetőbben érthetjük meg.

Példa

Ebben a példában olyan karakterlánc-értékeket használunk, mint pl 'jobb felső', 'középső felső', és 'bal felső' a kép elhelyezéséhez.

 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> 

Kimenet

Most van egy másik példa a tárgy-pozíció ingatlan.

Példa

Ebben a példában a a kezdeti érték, amely a képet középre helyezte. Ennek az az oka, hogy a kezdeti érték az alapértelmezett értékre állítja be a tulajdonságot, amely az 50% 50% . Számszerű értékeket is használunk 200 képpont és 100 képpont .

 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> 

Kimenet

Az úszó tulajdonság használatával

A CSS float tulajdonság egy pozicionálási tulajdonság, amellyel egy elemet balra vagy jobbra tolnak, lehetővé téve, hogy más elemek körbefussanak. Általában képekkel és elrendezésekkel használják.

Az elemek csak vízszintesen vannak lebegtetve. Így csak az elemek balra vagy jobbra úsztatása lehetséges, felfelé vagy lefelé nem. Egy lebegő elem a lehető legtávolabb balra vagy jobbra mozgatható. Egyszerűen azt jelenti, hogy egy lebegtetett elem a bal szélső vagy a jobb szélsőben jelenhet meg.

mysql felhasználói lista

Vegyünk egy példát a úszó ingatlan.

Példa

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

Kimenet