Există multe metode de a poziționa imaginea în CSS, cum ar fi utilizarea obiect-poziție proprietate, folosind pluti proprietate (pentru alinierea elementelor la stânga sau la dreapta).

Prin utilizarea proprietății obiect-poziție

The obiect-poziție proprietatea în CSS specifică alinierea conținutului în container. Este folosit cu potrivire obiect proprietate pentru a defini modul în care un element ca sau este poziționat cu coordonatele x/y în caseta de conținut.

Când utilizați potrivirea obiectului proprietate, valoarea implicită pentru obiect-poziție este 50% 50% , deci, implicit, toate imaginile sunt poziționate în centrul casetei de conținut. Putem schimba alinierea implicită utilizând obiect-poziție proprietate.

Sintaxă

 object-position: | initial | inherit; 

The poziţie valoarea a obiect-poziție proprietatea definește poziția videoclipului sau a imaginii în interiorul containerului. Acceptă două valori numerice, în care prima valoare controlează axa x, iar a doua valoare controlează axa y. Putem folosi șirul cum ar fi stanga dreapta , sau centru , etc pentru pozitionarea imaginii in container. Permite valori negative.

O putem înțelege mai clar folosind câteva exemple.

Exemplu

În acest exemplu, folosim valorile șirului cum ar fi „sus dreapta”, „sus centru”, și 'Stânga sus' pentru a poziționa imaginea.

 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> 

Ieșire

Acum, există un alt exemplu de utilizare a obiect-poziție proprietate.

Exemplu

În acest exemplu, folosim iniţială valoare care a poziționat imaginea spre centru. Se datorează faptului că inițiala setează proprietatea la valoarea implicită, care este 50% 50% . De asemenea, folosim valorile numerice 200px și 100px .

 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> 

Ieșire

Prin utilizarea proprietății float

Proprietatea CSS float este o proprietate de poziționare folosită pentru a împinge un element la stânga sau la dreapta, permițând altor elemente să se înfășoare în jurul lui. În general, este folosit cu imagini și machete.

Elementele sunt plutite numai pe orizontală. Deci este posibil doar să plutiți elemente la stânga sau la dreapta, nu în sus sau în jos. Un element plutit poate fi mutat cât mai mult posibil la stânga sau la dreapta. Pur și simplu, înseamnă că un element plutit se poate afișa la extrema stângă sau la extrema dreaptă.

Să luăm un exemplu de utilizare a pluti proprietate.

Exemplu

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

Ieșire