Gli sviluppatori hanno impostato la posizione di un'immagine per stabilire una chiara gerarchia visiva determinando l'ordine e le dimensioni dell'immagine rispetto ad altri elementi HTML. Posizionando l'immagine in varie posizioni, è anche possibile generare design moderni, unici e personalizzati che possono cambiare l'aspetto del sito web. Questo articolo illustra la procedura per impostare la posizione di un'immagine utilizzando i CSS.
Come impostare la posizione di un'immagine in CSS?
Impostando la posizione di un'immagine in CSS, i vantaggi come ' posizionamento preciso ”, “ elemento sovrapposto ' E ' progettazione reattiva ” può essere facilmente raggiunto. Utilizzando questi vantaggi, gli sviluppatori possono facilmente personalizzare e creare un sito Web completamente funzionale e accattivante. Esistono due metodi/proprietà con cui è possibile impostare la posizione di un'immagine. Queste proprietà sono descritte di seguito:
Metodo 1: utilizzo della proprietà float
IL ' galleggiante ” è fornita dal CSS per il movimento degli elementi HTML nella “ Sinistra ' O ' Giusto ” direzione. Viene utilizzato principalmente durante la creazione del layout reattivo per il posizionamento preciso degli elementi HTML.
Ad esempio, la proprietà 'float' viene utilizzata per allineare le immagini su entrambi i lati sinistro e destro della pagina Web:
< div >
< imm src = 'bg.jpg' altezza = '300px' larghezza = '400px' classe = 'posizioneDestra' >
< imm src = 'libro.jpg' altezza = '300px' larghezza = '400px' classe = 'posizioneSinistra' >
div >
Nel codice sopra:
-
- Innanzitutto, la radice ' div ” viene creato un elemento che funge da contenitore per gli elementi HTML.
- Successivamente, due “
I tag 'sono utilizzati all'interno del' etichetta '.- Successivamente, i valori di ' 300 pixel ' E ' 400 pixel ” sono forniti al “ altezza ' E ' larghezza ” attributi di entrambi “
” tag. - Inoltre, assegna una classe di ' posizioneDestra ' E ' posizioneSinistra ” rispettivamente al primo e al secondo tag “
”.
Ora, inserisci il '
< stile >” per applicare le seguenti proprietà CSS:
.positionDestra {
galleggiante: a destra;
}
.positionLeft {
galleggiante: sinistro;
}
stile >
La descrizione è riportata di seguito:
-
- Per prima cosa, seleziona ' posizioneDestra ” class e imposta il valore di “ Giusto ' al suo ' galleggiante ' proprietà. Questo sposta l'elemento HTML selezionato nella giusta direzione sulla pagina web.
- Quindi, seleziona ' posizioneSinistra ” class e fornire il valore di “ Sinistra ' al ' galleggiante ' proprietà. Questo sposta l'elemento verso il lato sinistro.
Al termine della fase di compilazione:
L'output mostra che le immagini sono state impostate nelle posizioni sinistra e destra.Metodo 2: utilizzo della proprietà posizione oggetto
IL ' posizione dell'oggetto ” garantisce il posizionamento dell'immagine o dell'elemento HTML in una posizione specifica della pagina web. Dà il controllo sul posizionamento orizzontale e verticale, consentendo all'utente di ottenere l'effetto visivo o il layout desiderato. Viene utilizzato principalmente dagli sviluppatori per il ritaglio di immagini, la creazione di miniature, layout personalizzati, ecc.
Questa proprietà può assumere sia valori numerici che parole chiave. Ad esempio, per ' posizione dell'oggetto ' proprietà. Imposta la posizione di un'immagine in CSS nel seguente frammento di codice:
< stile >
.numericalValues
{
posizione oggetto: 100px 20px;
}
.keywordValues
{
posizione dell'oggetto: a sinistra;
}
stile >
< corpo >
< div >
< imm src = 'libro.jpg' altezza = '300px' larghezza = '400px' classe = 'keywordValues' >
< imm src = 'bg.jpg' altezza = '300px' larghezza = '400px' classe = 'numericalValues' >
div >
corpo >
Nello snippet di codice sopra:-
- Prima il ' numericoValues ” la classe è selezionata all'interno del “
etichetta '. E i valori numerici di ' 100px 20px ” sono forniti al CSS “ posizione dell'oggetto ' proprietà. IL ' 100 pixel ” è lo spazio aggiunto in direzione orizzontale e il “ 20px ” per la verticale. - Successivamente, il “ parola chiaveValori ” la classe è selezionata e il valore della parola chiave di “ Sinistra ” è fornito al “ posizione dell'oggetto ” per allineare l'immagine verso sinistra.
- Dopo di che, all'interno del “
” tag vengono create due immagini e ad esse vengono assegnate le classi sopra create.
- Prima il ' numericoValues ” la classe è selezionata all'interno del “
Terminata la fase di compilazione, la pagina web si presenta così:
L'istantanea mostra che le immagini sono ora impostate su posizioni specifiche.Conclusione
La posizione di un'immagine può essere impostata utilizzando i CSS ' galleggiante ' E ' posizione dell'oggetto ' proprietà. IL ' galleggiante La proprietà ” prende la parola chiave come valore e sposta l'elemento nelle posizioni sinistra o destra. D'altra parte, il “ posizione dell'oggetto ”, accetta sia la parola chiave che i valori numerici in direzione orizzontale e verticale. Questo articolo ha mostrato la procedura per impostare la posizione di un'immagine nei CSS.
- Successivamente, i valori di ' 300 pixel ' E ' 400 pixel ” sono forniti al “ altezza ' E ' larghezza ” attributi di entrambi “