L'attributo height e width del tag <img> in HTML
Esempio
Imposta la larghezza e l'altezza dell'immagine rispettivamente a 200 pixel:
<img src="/i/mouse.jpg" height="200" width="200" />
Definizione e uso
L'attributo height e width del tag <img> imposta le dimensioni dell'immagine.
Suggerimento:Specificare height e width per l'immagine è un'abitudine buona. Se vengono impostati questi attributi, viene riservato uno spazio per l'immagine durante il caricamento della pagina. Senza questi attributi, il browser non può sapere la dimensione dell'immagine e non può riservare uno spazio adeguato, quindi la disposizione della pagina cambia quando l'immagine viene caricata. (Il seguente testo spiega questo punto in dettaglio).
Suggerimento:Non utilizzare gli attributi height e width per ingrandire l'immagine. Se si riduce l'immagine attraverso gli attributi height e width, l'utente deve scaricare un'immagine a alta risoluzione (anche se l'immagine sembra piccola sulla pagina). Il metodo corretto è quello di elaborare l'immagine con software prima di utilizzarla nella pagina web.
Leggi di più:Spiegazione dettagliata degli attributi height e width
Più esempi
Modificare la dimensione dell'immagine - Creare immagini di riempimento
Gli attributi height e width hanno una caratteristica nascosta: non è necessario specificare la dimensione effettiva dell'immagine, ossia, questi valori possono essere più grandi o più piccoli rispetto alle dimensioni reali. Il browser regolerà automaticamente l'immagine in modo che si adatti alla dimensione riservata. Con questo metodo è possibile creare facilmente miniature di immagini grandi e ingrandire immagini molto piccole. Tuttavia, è necessario notare che il browser deve comunque scaricare l'intero file, indipendentemente dalle dimensioni finali che verranno visualizzate, e se non mantiene le proporzioni originali dell'altezza e della larghezza, l'immagine subirà distorsioni.
Un'altra tecnica per l'uso degli attributi height e width è quella di riempire facilmente un'area della pagina, migliorando al contempo le prestazioni del documento. Immaginatevi di voler inserire una striscia colorata nel documento. Non è necessario creare un'immagine di dimensioni complete, bensì creare un'immagine di 1 pixel di larghezza e altezza e assegnare al colore che si desidera utilizzare. Poi utilizzate gli attributi height e width per espanderla a dimensioni più grandi.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
Ecco l'effetto di questo pezzo di HTML, la striscia colorata è stata creata con un'immagine di un solo pixel:
Uso di valori percentuali
Un trucco finale per l'uso dell'attributo width è utilizzare valori percentuali al posto dei valori assoluti in pixel. Questo farà sì che il browser scalzi l'immagine in base a una determinata proporzionale rispetto alla finestra di visualizzazione del browser. Pertanto, per creare una striscia colorata di larghezza uguale alla larghezza della finestra di visualizzazione e altezza di 30 pixel, è possibile farlo in questo modo:
<img src="/i/ct_1px.gif" width="60%" height="30px" />
Quando la dimensione della finestra del documento cambia, la dimensione dell'immagine cambia di conseguenza:
Suggerimento:Se è fornito un valore di width in forma percentuale e viene ignorata height, il browser manterrà la proporzionalità dell'immagine sia durante l'ingrandimento che durante la riduzione. Questo significa che il rapporto altezza/larghezza dell'immagine non cambierà e l'immagine non subirà distorsioni.
Vedi l'HTML di seguito:
<img src="/i/ct_1px.gif" width="20%" />
Questo significa che se imposti solo il valore percentuale del属性 width per l'immagine ct_1px.gif, otterrai un'immagine rettangolare (poiché il ct_1px.gif originale è un rettangolo di 1px di larghezza e altezza):
Suggerimento:Puoi provarli nel nostro strumento di test onlineProva tu stesso!
Suggerimento:Forniamo gli esempi di cui sopra per aiutarti a comprendere meglio l'uso degli attributi height e width. Se hai bisogno solo di grandi blocchi di colore uniforme per decorare la pagina, un metodo migliore èCreare un colore di sfondo utilizzando CSS.
Supporto del browser
Tutti i browser supportano gli attributi height e width.
Sintassi
<img height="value" />
oppure:
<img width="value" />
Valore dell'attributo
| Valore | Descrizione |
|---|---|
| pixels | Valori di altezza o larghezza espressi in pixel. |
| percent | Valori di altezza o larghezza espressi come percentuale del contenitore dell'elemento. |
Esempio TIY
- Adattare le dimensioni dell'immagine
- Questo esempio dimostra come adattare le immagini a diverse dimensioni.
Spiegazione dettagliata degli attributi height e width
Perché utilizzare gli attributi height e width
Hai mai visto il contenuto di un documento muoversi irregolarmente durante il caricamento? Questo accade perché il browser deve continuamente adattare la layout della pagina per visualizzare ogni immagine caricata. Il browser scarica e analizza le dimensioni in larghezza e altezza dell'immagine per determinare la sua dimensione, lasciando quindi uno spazio rettangolare corrispondente nella finestra di visualizzazione. Poi il browser adatta la layout della pagina per inserire l'immagine nella visualizzazione. Questo ci dice anche che le immagini sono file indipendenti e vengono caricati separatamente dal file sorgente.
Tuttavia, questo non è il metodo più efficace per visualizzare un documento, perché il browser deve controllare e calcolare lo spazio in schermo di ogni file immagine prima di visualizzare il contenuto adiacente e successivo, il che potrebbe causare notevoli ritardi nella visualizzazione del documento, interrompendo la lettura dell'utente.
Per i creatori, un metodo più efficace è quello di specificare le dimensioni dell'immagine tramite gli attributi height e width del tag <img>. In questo modo, il browser riserva uno spazio per l'immagine prima di scaricarla, accelerando la visualizzazione del documento e prevenendo lo spostamento del contenuto del documento. Entrambi gli attributi devono essere valori interi e sono espressi in pixel. L'ordine di apparizione degli attributi nel tag <img> non è importante.
Problemi con le proprietà height e width
Anche se le proprietà height e width del tag <img> possono migliorare le prestazioni e permettere alcune piccole tecniche, ci sono alcuni effetti negativi difficili da gestire quando si utilizzano. Anche se l'utente ha disattivato la funzione di download automatico delle immagini, il browser comunque deve mostrare lo spazio riservato per l'immagine con le dimensioni specificate. Di solito, questo lascia al lettore un riquadro vuoto, con un'icona senza senso che indica la posizione in cui dovrebbe essere l'immagine. In questo caso, la pagina sembra molto brutta, come se non fosse stata completata, e la maggior parte del contenuto è inutile. Se non si utilizzano queste dimensioni specificate, il browser metterà semplicemente un'icona dell'immagine nel testo, almeno lasciando qualcosa di leggibile.
Per questo problema non abbiamo ancora una soluzione, possiamo solo enfatizzare un punto, ovvero utilizzare proprietà alteTesto descrittivoIn questo modo, il lettore almeno sa cosa manca. Tuttavia, consigliamo di utilizzare queste proprietà di dimensione, poiché incoraggiamo tutto ciò che può migliorare le prestazioni del web.
