Come forzare uno <img> a occupare la larghezza, anche se l'immagine non è caricata

Question

Sto caricando un mucchio di img, e mi piacerebbe che occupassero spazio sul documento anche se non sono caricati, o non ho ancora completato il caricamento.

Ho provato a specificare la larghezza e l'altezza (sia come attributi stessi, sia all'interno di un attributo di stile), e trovo frustrante che le immagini non occupino spazio se non caricano.

Sicuramente, ci deve essere un modo per forzare un img a dimensioni specifiche, ** anche se quell'immagine non riesce a caricare.

Grazie

Answer 1

V'è certamente:

<img src="path/to/image.png" height="50" width="20" /> 

Inoltre, la ragione specificando la larghezza e l'altezza all'interno dell'attributo style="/* css */" non ha funzionato è perché le immagini sono, per impostazione predefinita, gli elementi in-line . Se avessi specificato display: block l'immagine avrebbe accettato i valori width e height.

Se si aggiunge, per il css/style:

display: inline-block; 

Dovrebbe funzionare. Non sono sicuro why Firefox non rispetta gli attributi width/height, ma comunque. Anche IE, con un valore definito doctype deve rispettare display: inline-block, poiché gli elementi img sono, di default, comunque in linea.

Answer 2

La semplice risposta: avvolgere l'immagine in uno con una larghezza fissa.

<div style="width: 400px;"><img src="404.png" /></div> 

Se si imposta padding, ecc confine 0, non si noterà che il div è lì.