Hogyan állítsuk be a kép pozícióját a CSS-ben?

A fejlesztők úgy határozzák meg a kép helyzetét, hogy egyértelmű vizuális hierarchiát hozzanak létre, meghatározva a kép sorrendjét és méreteit a többi HTML-elemhez képest. A kép különböző pozíciókba helyezésével modern, egyedi és egyedi dizájnok is generálhatók, amelyek megváltoztathatják a weboldal megjelenését és hangulatát. Ez a cikk bemutatja a kép helyzetének CSS használatával történő beállítását.

- Float Property használata
- Objektumpozíció tulajdonság használata

Hogyan állítsuk be a kép pozícióját a CSS-ben?

Ha beállítja a kép pozícióját a CSS-ben, az olyan előnyökkel jár, mint a ' pontos elhelyezés ”, „ átfedő elem ” és „ reszponzív dizájn ” könnyen megvalósítható. Ezekkel az előnyökkel a fejlesztők egyszerűen testreszabhatják és teljesen működőképes és szemet gyönyörködtető webhelyet készíthetnek. Két módszer/tulajdonság van a kép helyzetének beállítására. Ezeket a tulajdonságokat az alábbiakban ismertetjük:

1. módszer: Float Property használata

A ' úszó ” tulajdonságot a CSS biztosítja a HTML elemek mozgatásához a „ bal ” vagy „ jobb ” irányba. Leginkább a reszponzív elrendezés létrehozásakor használják a HTML-elemek pontos elhelyezéséhez.

Például a „float” tulajdonság a képek igazítására szolgál a weboldal bal és jobb oldalán:

< div >
< img src = 'bg.jpg' magasság = '300 képpont' szélesség = '400 képpont' osztály = 'pozíciójobbra' >
< img src = 'könyv.jpg' magasság = '300 képpont' szélesség = '400 képpont' osztály = 'pozíció balra' >
div >

A fenti kódban:

- Először is a gyökér ' div ” elem jön létre, amely a HTML elemek tárolójaként működik.
- Ezután két' ' címkéket használnak a '
  ” címke.
- Ezt követően a „ 300 képpont ” és „ 400 képpont ' biztosítják a ' magasság ” és „ szélesség 'mindkettő attribútumai' ” címkéket.
- Rendeljen hozzá egy osztályt is pozícióJobb ” és „ pozícióBal ” az első és a második „ ” címkéhez.

Most írja be a „ ” címke a következő CSS-tulajdonságok alkalmazásához:

< stílus >
.pozícióJobb {
úszó: jobb;
}
.pozícióBal {
balra lebeg;
}
stílus >

A leírás alább található:

- Először válassza ki a „ pozícióJobb ' osztályba, és állítsa be a ' jobb 'hozzá' úszó ' ingatlan. Ez a kiválasztott HTML-elemet a megfelelő irányba mozgatja a weboldalon.
- Ezután válassza ki a „ pozícióBal ' osztály, és adja meg a ' bal ' hoz ' úszó ' ingatlan. Ez az elemet a bal oldal felé mozgatja.

Az összeállítási fázis vége után:

A kimenet azt mutatja, hogy a képek bal és jobb pozícióba lettek beállítva.

2. módszer: Az objektumpozíció tulajdonság használata

A ' tárgy-pozíció ” tulajdonság biztosítja a kép vagy HTML elem elhelyezését a weboldal egy adott pozíciójában. Lehetővé teszi a vízszintes és függőleges pozicionálás szabályozását, lehetővé téve a felhasználó számára a kívánt vizuális hatás vagy elrendezés elérését. Leginkább a fejlesztők használják képkivágásra, miniatűrök, egyedi elrendezések készítésére stb.

Ez a tulajdonság numerikus és kulcsszóértékeket is felvehet. Például számszerű és kulcsszóértékek is rendelkezésre állnak a „ tárgy-pozíció ' ingatlan. Az alábbi kódrészletben beállítja a kép pozícióját a CSS-ben:

< stílus >
.numericalValues
{
objektum pozíciója: 100 képpont 20 képpont;
}
.keywordValues
{
objektum helyzete: bal;
}
stílus >
< test >
< div >
< img src = 'könyv.jpg' magasság = '300 képpont' szélesség = '400 képpont' osztály = 'kulcsszóértékek' >
< img src = 'bg.jpg' magasság = '300 képpont' szélesség = '400 képpont' osztály = 'numericalValues' >
div >
test >

A fenti kódrészletben:

- Először is a „ numericalValues ' osztály van kiválasztva a ' ” címke. És a „ 100 képpont 20 képpont ' vannak biztosítva a CSS-nek' tárgy-pozíció ' ingatlan. A ' 100 képpont ” a vízszintes irányban hozzáadott szóköz és a „ 20 képpont ” a függőlegeshez.
- Ezután a „ kulcsszóértékek ' osztály van kiválasztva, és a kulcsszó értéke ' bal ' a ' tárgy-pozíció ” tulajdonságot, hogy a képet balra igazítsa.
- Ezt követően a „ ” címkével két kép jön létre, és hozzájuk rendeljük a fent létrehozott osztályokat.

Az összeállítási fázis befejezése után a weboldal így néz ki:

A pillanatfelvétel azt szemlélteti, hogy a képek most meghatározott pozíciókra vannak állítva.

Következtetés

A kép pozíciója a CSS segítségével állítható be. úszó ” és „ tárgy-pozíció ” tulajdonságait. A ' úszó ” tulajdonság értékeként veszi a kulcsszót, és balra vagy jobbra mozgatja az elemet. Másrészt a „ tárgy-pozíció ”, kulcsszó- és számértékeket is vesz vízszintes és függőleges irányban. Ez a cikk bemutatja a kép helyzetének beállítását a CSS-ben.

Hogyan állítsuk be a kép pozícióját a CSS-ben?