Dezvoltatorii setează poziția unei imagini pentru a stabili o ierarhie vizuală clară, determinând ordinea și dimensiunile imaginii în raport cu alte elemente HTML. Prin plasarea imaginii în diferite poziții, se pot genera și modele moderne, unice și personalizate, care pot schimba aspectul site-ului. Acest articol demonstrează procedura de setare a poziției unei imagini folosind CSS.
Cum să setați poziția unei imagini în CSS?
Prin setarea poziției unei imagini în CSS, beneficiile ca „ plasare precisă ”, “ element suprapus ' și ' design receptiv ” poate fi ușor de realizat. Folosind aceste beneficii, dezvoltatorii pot personaliza și construi cu ușurință un site web complet funcțional și atrăgător. Există două metode/proprietăți prin care se poate seta poziția unei imagini. Aceste proprietăți sunt descrise mai jos:
Metoda 1: Utilizarea proprietății Float
„ pluti ” este oferită de CSS pentru mișcarea elementelor HTML în “ stânga ” sau ” dreapta ” direcție. Este utilizat mai ales în timpul creării unui aspect receptiv pentru plasarea precisă a elementelor HTML.
De exemplu, proprietatea „float” este utilizată pentru alinierea imaginilor atât în partea stângă, cât și în partea dreaptă a paginii web:
< div >
< img src = „bg.jpg” înălţime = '300px' lăţime = '400px' clasă = „poziție dreapta” >
< img src = „carte.jpg” înălţime = '300px' lăţime = '400px' clasă = „poziție stânga” >
div >
În codul de mai sus:
-
- În primul rând, rădăcina „ div ” este creat elementul care funcționează ca un container pentru elemente HTML.
- În continuare, două „
etichetele „ sunt utilizate în interiorul „
' etichetă.- După aceea, valorile lui „ 300px ' și ' 400px ' sunt furnizate ' înălţime ' și ' lăţime ” atributele ambelor ”
' Etichete.
- De asemenea, atribuiți o clasă de „ pozițieDreapta ' și ' pozițieLeft ” la prima și, respectiv, a doua etichetă „
”.
Acum, introduceți „
< stil >” pentru a aplica următoarele proprietăți CSS:
.pozițieDreapta {
plutire: dreapta;
}
.pozitiaStânga {
plutește la stânga;
}
stil >
Descrierea este prezentată mai jos:
-
- Mai întâi, selectați „ pozițieDreapta ” și setați valoarea lui ” dreapta „la sa „ pluti ” proprietate. Acest lucru mută elementul HTML selectat în direcția corectă pe pagina web.
- Apoi, selectați „ pozițieLeft ” și furnizează valoarea ” stânga „la „ pluti ” proprietate. Acest lucru mută elementul spre partea stângă.
După încheierea fazei de compilare:
Rezultatul arată că imaginile au fost setate în pozițiile stânga și dreapta.Metoda 2: Utilizarea proprietății object-position
„ obiect-poziție ” proprietatea asigură plasarea imaginii sau a elementului HTML într-o anumită poziție pe pagina web. Oferă control asupra poziționării orizontale și verticale, permițând utilizatorului să obțină efectul vizual sau aspectul dorit. Este utilizat în cea mai mare parte de către dezvoltatori pentru tăierea imaginilor, crearea de miniaturi, machete personalizate etc.
Această proprietate poate lua atât valori numerice, cât și valori ale cuvintelor cheie. De exemplu, atât valorile numerice, cât și valorile cuvintelor cheie sunt furnizate pentru „ obiect-poziție ” proprietate. Setează poziția unei imagini în CSS în fragmentul de cod de mai jos:
< stil >
.valori numerice
{
poziția obiectului: 100px 20px;
}
.keywordValues
{
obiect-poziție: stânga;
}
stil >
< corp >
< div >
< img src = „carte.jpg” înălţime = '300px' lăţime = '400px' clasă = „Valori cuvinte cheie” >
< img src = „bg.jpg” înălţime = '300px' lăţime = '400px' clasă = „valori numerice” >
div >
corp >
În fragmentul de cod de mai sus:-
- În primul rând, „ valori numerice ” este selectată în interiorul “
' etichetă. Și valorile numerice ale lui „ 100px 20px „ sunt furnizate CSS „ obiect-poziție ” proprietate. „ 100px ” este spațiul adăugat în direcția orizontală și „ 20px ” pentru verticală. - În continuare, „ valorile cheie ” este selectată și valoarea cuvântului cheie „ stânga ' este furnizat către ' obiect-poziție ” pentru a alinia imaginea spre direcția stângă.
- După aceea, în interiorul „
” tag sunt create două imagini, iar clasele create mai sus sunt alocate acestora.
- În primul rând, „ valori numerice ” este selectată în interiorul “
După încheierea fazei de compilare, pagina web apare astfel:
Instantaneul ilustrează faptul că imaginile sunt acum setate pe anumite poziții.Concluzie
Poziția unei imagini poate fi setată folosind CSS „ pluti ' și ' obiect-poziție ” proprietăți. „ pluti ” proprietate ia cuvântul cheie ca valoare și mută elementul în pozițiile stânga sau dreapta. Pe de altă parte, „ obiect-poziție ”, preia atât cuvinte cheie, cât și valori numerice în direcții orizontale și verticale. Acest articol a demonstrat procedura de setare a poziției unei imagini în CSS.
- După aceea, valorile lui „ 300px ' și ' 400px ' sunt furnizate ' înălţime ' și ' lăţime ” atributele ambelor ”