Come Impostare la Larghezza e l'Altezza di un Immagine in HTML

Nel linguaggio HTML, gli attributi "width" [larghezza] ed "height" [altezza] specificano le dimensioni di un'immagine in pixel. Nella versione 4.01 del linguaggio, l'altezza può essere definita in pixel o in %, mentre in HTML5, il valore deve essere espresso in pixel. Questo articolo spiega come impostare la larghezza e l'altezza di un'immagine utilizzando il codice del linguaggio HTML (dall'inglese "HyperText Markup Language").

Passaggi

Scarica PDF

1
Apri il tuo documento HTML con un editor di testo. I computer Mac o Windows hanno un editor integrato, rispettivamente TextEdit e Notepad, con cui è possibile modificare un file HTML o crearne uno nuovo. Puoi scegliere di aprire tale file direttamente dall'interno del programma (cliccando su Apri da "File") oppure cliccandoci sopra con il tasto destro del mouse e scegliendo Apri con... dal menu che comparirà.
2
Aggiungi la seguente linea di codice: <img src="imagefile.jpg" alt="Image" height="42" width="42">
- src rappresenta il parametro in cui va indicato il percorso in cui è memorizzata l'immagine da visualizzare.
- alt rappresenta il tag che hai assegnato all'immagine.
- Nota che quei numeri sono espressi in pixel;
- Potresti usare anche il tag style. Per esempio, in questo caso, nel tuo codice avresti una riga come la seguente: <img src="imgfile.jpg" alt="Image" style="width:500px;height:600px;">. Il tag style serve a fare in modo che l'immagine rimanga entro le dimensioni specificate nel codice e annulla qualsiasi ulteriore comando in merito alle dimensioni.^{[1]
  X
  Fonte di ricerca}
3
Cambia i valori degli attributi height e width con quelli relativi all'immagine che vuoi visualizzare. Per esempio, se digiti il valore 21 per entrambi gli attributi, le dimensioni dell'immagine saranno la metà rispetto all'immagine della riga dell'esempio precedente.
4
Salva il file e poi aprilo utilizzando un qualsiasi browser internet per visualizzare l'effetto. Se il risultato non ti soddisfa, continua a cambiare i valori dei passaggi precedenti. L'attributo "width" è supportato da tutti i browser più diffusi e usati, come Google Chrome, Safari, Mozilla Firefox, Opera, Edge e Internet Explorer.^{[2]
X
Fonte di ricerca}

Pubblicità

Consigli

Ricorda sempre di specificare sia l'altezza sia la larghezza delle immagini che inserisci nelle pagine web. Se questi due attributi sono impostati correttamente, lo spazio necessario per la visualizzazione dell'immagine verrà preconfigurato nel momento in cui la pagina viene caricata dal browser. Se invece questi due parametri non vengono impostati, il browser non sarà in grado di determinare le dimensioni dell'immagine e non potrà riservare lo spazio necessario alla sua visualizzazione all'interno della pagina. L'effetto che otterrai sarà un'inevitabile variazione dell'aspetto della pagina durante il caricamento dei dati, cioè mentre l'immagine viene scaricata sul computer.
Ridimensionando un'immagine di grandi dimensioni utilizzando gli attributi "height" e "width" obbligherai gli utenti a scaricare l'immagine completa (anche se all'interno della pagina occupa uno spazio molto piccolo). Per evitare questo problema, ridimensiona l'immagine utilizzando un editor apposito prima di inserirla all'interno della tua pagina web.