Proprietà height di HTML <img>
Definizione e uso
altezza proprietà che determina l'altezza dell'immagine in pixel.
Suggerimento:Imponi sempre all'immagine altezza e proprietà larghezzaSe sono impostate l'altezza e la larghezza, verrà riservato lo spazio necessario per l'immagine durante il caricamento della pagina. Altrimenti, se non ci sono queste proprietà, il browser non conosce le dimensioni dell'immagine e non può riservare uno spazio adeguato. Questo può causare cambiamenti nella layout della pagina durante il caricamento (quando l'immagine viene caricata).
Suggerimento:usare altezza e larghezza Ridurre le dimensioni di un'immagine grande costringe l'utente a scaricare l'immagine grande (anche se sembra piccola sulla pagina). Per evitare questo, utilizzate un software di elaborazione delle immagini per ridimensionare l'immagine prima di utilizzarla nella pagina.
Leggi di più:Spiegazione dettagliata dell'attributo height e width
Esempio
Un'immagine di 600 pixel di altezza e 500 pixel di larghezza:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Sintassi
<img height="pixels">
Valore dell'attributo
| Valore | Descrizione |
|---|---|
| pixels | Specificare l'altezza dell'immagine in pixel (ad esempio height="100"). |
Più esempi
Cambiare 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, quindi questi valori possono essere più grandi o più piccoli rispetto alle dimensioni reali. Il browser adatterà automaticamente l'immagine in modo che si adatti alla dimensione riservata. Utilizzando questo metodo, è possibile creare facilmente anteprime di immagini grandi e ingrandire immagini molto piccole. Tuttavia, è necessario notare che il browser deve ancora scaricare l'intero file, indipendentemente dalle dimensioni finali dell'immagine visualizzata, e se non viene mantenuta la proporzione originale di altezza e larghezza, l'immagine subirà distorsioni.
Un'altra tecnica per utilizzare gli attributi height e width è quella di riempire facilmente un'area della pagina, migliorando al contempo le prestazioni del documento. Immaginatevi di voler inserire una barra 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 suo interno il colore che si desidera utilizzare. Poi utilizzate gli attributi height e width per espanderla a una dimensione più grande.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
Ecco l'effetto di questo pezzo di HTML, la barra colorata è stata creata con un'immagine di un solo pixel:
Usare valori percentuali
Un ultimo trucco per utilizzare l'attributo width è quello di usare valori percentuali al posto dei valori assoluti in pixel. Questo farà sì che il browser riduca l'immagine in base a una certa proporzione rispetto alla finestra di visualizzazione del browser. Pertanto, per creare una barra orizzontale colorata di larghezza uguale alla 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 viene fornito un valore di larghezza in percentuale e viene ignorata l'altezza, il browser manterrà le proporzioni altezza/larghezza dell'immagine sia quando l'immagine viene ingrandita che quando viene ridotta. Questo significa che il rapporto altezza/larghezza dell'immagine non cambierà e l'immagine non subirà distorsioni.
Vedete il seguente HTML:
<img src="/i/ct_1px.gif"} width="20%" />
Questo significa che se si imposta solo il valore percentuale dell'attributo width dell'immagine ct_1px.gif, si ottiene un'immagine rettangolare (poiché il ct_1px.gif originale è un rettangolo di 1px di larghezza e altezza):
Suggerimento:Il nostro obiettivo con gli esempi forniti è quello di aiutarti a comprendere meglio l'uso dell'attributo height e width. Se hai bisogno solo di un grande blocco di colore uniforme per decorare la pagina, un metodo migliore èUtilizzare CSS per creare il colore di sfondo.
Spiegazione dettagliata dell'attributo height e width
Perché utilizzare l'attributo height e width
Hai mai visto il contenuto del documento che si muove 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 la larghezza e l'altezza dell'immagine per determinare la dimensione dell'immagine, lasciando quindi uno spazio rettangolare corrispondente nella finestra di visualizzazione. Poi il browser adatta il layout della pagina per inserire l'immagine nella visualizzazione. Questo ci dice anche che le immagini sono file indipendenti, che vengono caricati separatamente dal file sorgente.
Ma questo non è il metodo più efficace per visualizzare il documento, perché il browser deve controllare e calcolare lo spazio sullo schermo di ogni file di immagine prima di visualizzare il contenuto adiacente e successivo, il che potrebbe causare un ritardo significativo nella visualizzazione del documento, interrompendo la lettura dell'utente.
Per i creatori, un metodo più efficace è specificare le dimensioni dell'immagine attraverso l'attributo height e width dell'etichetta <img>. In questo modo, il browser riserva lo spazio per l'immagine prima di scaricarla, accelerando la visualizzazione del documento e prevenendo il movimento del contenuto del documento. Entrambi gli attributi devono essere valori interi e vengono espressi in pixel. L'ordine di apparizione di questi attributi nell'etichetta <img> non è importante.
Problemi dell'attributo height e width
Anche se l'attributo height e width dell'etichetta <img> può migliorare le prestazioni e permettere alcune piccole tecniche, ci sono alcuni effetti negativi complicati quando si utilizzano. Anche se l'utente ha disattivato la funzione di download automatico delle immagini, il browser deve ancora visualizzare lo spazio riservato per l'immagine con le dimensioni specificate. Di solito lascia un riquadro vuoto al lettore, con un'icona senza senso che indica che è il luogo 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 inserirà semplicemente un'icona dell'immagine nel testo, il che almeno lascia qualcosa da leggere.
Per questo problema non abbiamo ancora una soluzione, possiamo solo enfatizzare un punto, ovvero utilizzare proprietà alt eTesto descrittivoIn questo modo, il lettore almeno sa cosa manca. Tuttavia, consigliamo di utilizzare queste proprietà di dimensione, poiché incoraggiamo ogni comportamento che possa migliorare le prestazioni del web.
Supporto browser
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Supporto | Supporto | Supporto | Supporto | Supporto |
