Hi ha molts mètodes per posicionar la imatge en CSS, com ara utilitzar el posició-objecte propietat, utilitzant el flotar propietat (per alinear els elements a l'esquerra o a la dreta).
Mitjançant l'ús de la propietat object-position
El posició-objecte propietat en CSS especifica l'alineació del contingut dins del contenidor. S'utilitza amb el ajust d'objecte propietat per definir com un element com or es col·loca amb les coordenades x/y al seu quadre de contingut.
Quan utilitzeu el ajust d'objecte propietat, el valor predeterminat de posició-objecte és 50% 50% , de manera que, per defecte, totes les imatges es col·loquen al centre del seu quadre de contingut. Podem canviar l'alineació per defecte utilitzant el posició-objecte propietat.
Sintaxi
object-position: | initial | inherit;
El posició valor de la posició-objecte defineix la posició del vídeo o la imatge dins del contenidor. Accepta dos valors numèrics, on el primer valor controla l'eix X i el segon valor controla l'eix Y. Podem utilitzar la cadena com ara esquerra dreta , o centre , etc. per col·locar la imatge al contenidor. Permet valors negatius.
img css align
Podem entendre-ho més clarament utilitzant alguns exemples.
Exemple
En aquest exemple, estem utilitzant els valors de cadena com ara 'superior dret', 'superior central', i 'superior esquerre' per posicionar la imatge.
què és un hashset en java
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> Prova-ho ara Sortida
Ara, hi ha un altre exemple d'ús del posició-objecte propietat.
Exemple
En aquest exemple, estem utilitzant el inicial valor que situa la imatge al centre. És perquè la inicial estableix la propietat al seu valor predeterminat, que és 50% 50% . També estem utilitzant els valors numèrics 200 píxels i 100 píxels .
derivada parcial en làtex
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> Prova-ho ara Sortida
Utilitzant la propietat float
La propietat flotant CSS és una propietat de posicionament que s'utilitza per empènyer un element cap a l'esquerra o cap a la dreta, permetent que altres elements s'envoltin. Generalment, s'utilitza amb imatges i dissenys.
Els elements només floten horitzontalment. Per tant, només és possible flotar elements cap a l'esquerra o la dreta, no cap amunt ni cap avall. Un element flotant es pot moure tan lluny com sigui possible cap a l'esquerra o cap a la dreta. Simplement, vol dir que un element flotant es pot mostrar a l'extrema esquerra o extrema dreta.
Prenguem un exemple d'ús de flotar propietat.
Exemple
CSS float property #left { float: left; } #right { float: right; } Prova-ho ara Sortida
