Esistono molti metodi per posizionare l'immagine nei CSS, come utilizzare il file posizione dell'oggetto proprietà, utilizzando il galleggiante proprietà (per allineare gli elementi a sinistra o a destra).
Utilizzando la proprietà posizione dell'oggetto
IL posizione dell'oggetto La proprietà nei CSS specifica l'allineamento del contenuto all'interno del contenitore. Viene utilizzato con il adattamento all'oggetto proprietà per definire come un elemento come o è posizionato con le coordinate x/y nella casella del contenuto.
Quando si utilizza il adattamento all'oggetto proprietà, il valore predefinito per posizione dell'oggetto È 50% 50% , quindi, per impostazione predefinita, tutte le immagini sono posizionate al centro della casella del contenuto. Possiamo modificare l'allineamento predefinito utilizzando il file posizione dell'oggetto proprietà.
Sintassi
object-position: | initial | inherit;
IL posizione valore del posizione dell'oggetto La proprietà definisce la posizione del video o dell'immagine all'interno del contenitore. Accetta due valori numerici, dove il primo valore controlla l'asse x e il secondo valore controlla l'asse y. Possiamo usare la stringa come sinistra destra , O centro , ecc. per posizionare l'immagine nel contenitore. Consente valori negativi.
Possiamo capirlo più chiaramente utilizzando alcuni esempi.
Esempio
In questo esempio, stiamo utilizzando valori stringa come 'in alto a destra', 'in alto al centro', E 'in alto a sinistra' per posizionare l'immagine.
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> Provalo adesso Produzione
Ora, c'è un altro esempio di utilizzo di posizione dell'oggetto proprietà.
Esempio
In questo esempio, stiamo utilizzando il file iniziale valore che ha posizionato l'immagine al centro. È perché l'iniziale imposta la proprietà sul suo valore predefinito che è 50% 50% . Usiamo anche valori numerici 200px E 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> Provalo adesso Produzione
Utilizzando la proprietà float
La proprietà CSS float è una proprietà di posizionamento utilizzata per spingere un elemento a sinistra o a destra, consentendo ad altri elementi di avvolgerlo. Generalmente viene utilizzato con immagini e layout.
Gli elementi vengono mobilizzati solo orizzontalmente. Quindi è possibile spostare gli elementi solo a sinistra o a destra, non in alto o in basso. Un elemento flottato può essere spostato quanto più a sinistra o a destra possibile. Significa semplicemente che un elemento flottato può essere visualizzato all'estrema sinistra o all'estrema destra.
Facciamo un esempio di utilizzo di galleggiante proprietà.
Esempio
CSS float property #left { float: left; } #right { float: right; } Provalo adesso Produzione
