Els desenvolupadors estableixen la posició d'una imatge per establir una jerarquia visual clara determinant l'ordre i les dimensions de la imatge en relació amb altres elements HTML. En col·locar la imatge en diverses posicions, també es poden generar dissenys moderns, únics i personalitzats que poden canviar l'aspecte del lloc web. Aquest article mostra el procediment per configurar la posició d'una imatge mitjançant CSS.
Com establir la posició d'una imatge en CSS?
En establir la posició d'una imatge en CSS, els avantatges com ' col·locació precisa ”, “ element superposat ' i ' disseny responsive ” es pot aconseguir fàcilment. Utilitzant aquests avantatges, els desenvolupadors poden personalitzar i crear fàcilment un lloc web totalment funcional i atractiu. Hi ha dos mètodes/propietats pels quals es pot establir la posició d'una imatge. Aquestes propietats es descriuen a continuació:
Mètode 1: Ús de la propietat flotant
El ' flotar La propietat ' la proporciona el CSS per al moviment d'elements HTML al ' esquerra ' o ' dret ' direcció. S'utilitza principalment mentre es crea el disseny responsiu per a la col·locació precisa dels elements HTML.
Per exemple, la propietat 'float' s'utilitza per alinear imatges tant al costat esquerre com al dret de la pàgina web:
< div >
< img src = 'bg.jpg' alçada = '300 px' amplada = '400 px' classe = 'posició dreta' >
< img src = 'llibre.jpg' alçada = '300 px' amplada = '400 px' classe = 'posicióEsquerra' >
div >
En el codi anterior:
-
- En primer lloc, l'arrel ' div ” es crea un element que funciona com a contenidor per a elements HTML.
- A continuació, dos '
Les etiquetes ' s'utilitzen dins de la '
' etiqueta.- Després d'això, els valors de ' 300 píxels ' i ' 400 píxels ' es proporcionen a la ' alçada ' i ' amplada 'atributs de tots dos'
etiquetes.
- A més, assigneu una classe de ' posició dreta ' i ' posicióEsquerra ” a la primera i la segona etiquetes “
”, respectivament.
Ara, introduïu el '
< estil >” per aplicar les propietats CSS següents:
.posicióDreta {
flotar: dret;
}
.posicióEsquerra {
flotar: esquerra;
}
estil >
La descripció es dóna a continuació:
-
- En primer lloc, seleccioneu ' posició dreta ” classe i establiu el valor de “ dret 'al seu' flotar ' propietat. Això mou l'element HTML seleccionat en la direcció correcta a la pàgina web.
- A continuació, seleccioneu ' posicióEsquerra ” classe i proporcioneu el valor de “ esquerra ' fins al ' flotar ' propietat. Això mou l'element per moure's cap al costat esquerre.
Després del final de la fase de compilació:
La sortida mostra que les imatges s'han establert a les posicions esquerra i dreta.Mètode 2: Ús de la propietat object-position
El ' posició-objecte ” assegura la col·locació de la imatge o l'element HTML en una posició específica de la pàgina web. Dóna control sobre el posicionament horitzontal i vertical, permetent a l'usuari aconseguir l'efecte visual o disseny desitjat. Els desenvolupadors l'utilitzen principalment per retallar imatges, crear miniatures, dissenys personalitzats, etc.
Aquesta propietat pot prendre valors tant numèrics com de paraules clau. Per exemple, es proporcionen valors tant numèrics com de paraules clau per a ' posició-objecte ' propietat. Estableix la posició d'una imatge en CSS al fragment de codi següent:
< estil >
.valors numèrics
{
posició de l'objecte: 100px 20px;
}
.keywordValues
{
posició-objecte: esquerra;
}
estil >
< cos >
< div >
< img src = 'llibre.jpg' alçada = '300 px' amplada = '400 px' classe = 'valors de paraula clau' >
< img src = 'bg.jpg' alçada = '300 px' amplada = '400 px' classe = 'valors numèrics' >
div >
cos >
Al fragment de codi anterior:-
- En primer lloc, el ' valors numèrics La classe ' es selecciona dins de la '
' etiqueta. I els valors numèrics de ' 100px 20px ' es proporcionen al CSS ' posició-objecte ' propietat. El ' 100 píxels ' és l'espai afegit en direcció horitzontal i el ' 20 píxels ” per la vertical. - A continuació, el ' keywordValues ” està seleccionada i el valor de la paraula clau “ esquerra ' es proporciona a la ' posició-objecte ” propietat per alinear la imatge cap a la direcció esquerra.
- Després d'això, dins del '
” es creen dues imatges de l'etiqueta i se'ls assignen les classes creades anteriorment.
- En primer lloc, el ' valors numèrics La classe ' es selecciona dins de la '
Un cop finalitzada la fase de compilació, la pàgina web apareix així:
La instantània il·lustra que les imatges ara estan configurades en posicions específiques.Conclusió
La posició d'una imatge es pot establir mitjançant CSS ' flotar ' i ' posició-objecte ” propietats. El ' flotar ” pren la paraula clau com a valor i mou l'element en posicions esquerra o dreta. D'altra banda, el ' posició-objecte ”, pren tant paraules clau com valors numèrics en direccions horitzontal i vertical. Aquest article ha demostrat el procediment per establir la posició d'una imatge en CSS.
- Després d'això, els valors de ' 300 píxels ' i ' 400 píxels ' es proporcionen a la ' alçada ' i ' amplada 'atributs de tots dos'