Comment forcer un <img> à prendre de la largeur, même si l'image n'est pas chargée

Question

Je charge beaucoup d'img, et je voudrais qu'ils occupent de l'espace sur le document même s'ils ne sont pas chargés, ou n'ont pas encore terminé le chargement. J'ai essayé de spécifier la largeur et la hauteur (à la fois comme attributs eux-mêmes et dans un attribut de style), et je trouve frustrant que les images ne prennent pas de place si elles ne se chargent pas.

Sûrement, il doit y avoir un moyen de forcer un img à des dimensions spécifiques, ** même si cette image ne se charge pas.

Merci

Answer 1

Il y a certainement:

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

En outre, la raison pour spécifier la largeur et la hauteur à l'intérieur de l'attribut style="/* css */" n'a pas fonctionné parce que les images sont, par défaut, les éléments en ligne . Si vous aviez spécifié display: block, l'image aurait accepté les valeurs width et height.

Si vous ajoutez à la css/style:

display: inline-block; 

Il devrait fonctionner. Je ne suis pas sûr pourquoi Firefox ne respecte pas les attributs width/height, mais quand même. Même IE, avec un doctype défini devrait respecter display: inline-block, puisque img éléments sont, par défaut, en ligne quand même.

Answer 2

La réponse simple: envelopper l'image dans un <div> avec une largeur fixe.

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

Si vous définissez le rembourrage, etc bordure à 0, vous ne remarquerez que la div est là.