creatori di siti web possono includere immagini sulle loro pagine utilizzando semplice codice HTML. La maggior parte dei siti web utilizzano una combinazione di codice HTML e Cascading Style Sheet per determinare il layout e l'aspetto di elementi, tra cui le loro dimensioni. Siti web non hanno bisogno di specificare la larghezza e l'altezza delle immagini per impostazione predefinita, ma possono scegliere di farlo utilizzando sia codice HTML e CSS. Specificando l'altezza e la larghezza delle immagini nelle pagine Web è in genere semplice.

Gli attributi HTML

codice di una pagina web può specificare larghezza e altezza per un'immagine utilizzando attributi dell'elemento dell'immagine. Il codice di esempio seguente illustrata la creazione di un'immagine e specificando la larghezza e l'altezza nella stessa riga di codice: <img alt = "immagine" width = "200px" height = "150px" />

Questo codice specifica l'immagine, che in questo caso sarebbe stato memorizzato in una directory chiamata "immagini", nella stessa directory come pagina Web stesso. Gli attributi di larghezza e altezza sono opzionali, quindi, se non sono inclusi l'immagine verrà visualizzata alle sue dimensioni predefinite.

CSS selettori

codice della pagina Web può applicare larghezza e altezza per le immagini con gli attributi class e id. codice CSS utilizza questi attributi per identificare gli elementi HTML in una pagina, l'attuazione delle regole di stile specificati su tali elementi. Il seguente codice HTML crea un'immagine con un attributo ID: <img alt = "immagine" id = "pic" />

Un attributo ID specifico dovrebbe apparire solo una volta all'interno di una singola pagina Web. Il codice CSS in dotazione o sono legati al dall'interno della sezione della pagina testa può di questa immagine come segue:

pic {

width: 200px;

altezza: 150px;

}

Il seguente codice HTML dichiara un'immagine con un attributo class: <img alt = "immagine" class = "pic" />

codice CSS può lo stile in questo modo:

img.pic {

width: 200px;

altezza: 150px;

}

CSS Inline

codice CSS può stile elementi di immagine HTML direttamente all'interno della pagina markup. La seguente sintassi HTML illustra questa tecnica: <img alt = "immagine" style = "width: 200px; height: 150px" />

Questo ha un effetto simile al codice che specifica la larghezza e altezza attributi dell'elemento dell'immagine. Se la larghezza e l'altezza specificata non sono le dimensioni naturali del file immagine, far rispettare larghezza e altezza possono distorcere l'immagine come appare all'interno della pagina Web.

elemento padre

codice della pagina web può specificare alcune regole di stile per le immagini facendo riferimento ai loro elementi padre. Il seguente codice HTML dichiara un'immagine all'interno di un elemento "div" con un attributo class specifica: <div class = "picholder"> <img alt = "immagine" /> </ div>

Il codice CSS per la pagina potrebbe specificare styling per l'immagine e l'elemento principale come segue:

div.picholder {

width: 400px;

altezza: 300px;

}

div.picholder img {

width: 50%;

altezza: 50%;

}

Questo codice specifica le dimensioni dell'elemento di immagine come un valore percentuale della larghezza specificata e l'altezza per l'elemento tenendolo.