Comment faire pour forcer un <img> pour prendre en largeur, même si l'image n'est pas chargée

Je suis le chargement d'un tas de img, et je voudrais qu'ils prennent de l'espace sur le document, même si elles ne sont pas chargées, ou n'ont pas fini de charger encore.

J'ai essayé de spécifier la largeur et la hauteur (à la fois en tant qu'attributs eux-mêmes, et dans un attribut style), et de trouver frustrant que les images ne prennent de la place, s'ils ne se charge pas.

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

Grâce

OriginalL'auteur Sambo | 2010-09-25

  1. 12

    Il est certainement:

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

    Aussi, la raison pour spécifier la largeur et la hauteur dans le style="/* css */" attribut n'a pas de travail est parce que les images sont, par défaut, les éléments de ligne. Avait spécifié display: block l'image aurait accepté la width et height valeurs.

    Si vous ajoutez, à la css/style:

    display: inline-block;

    Il devrait fonctionner. Je ne suis pas sûr pourquoi Firefox de ne pas respecter la largeur/hauteur des attributs, mais tout de même. Même c'est à dire, avec la définition d'un doctype doivent respecter display: inline-block, depuis img éléments sont, par défaut, dans la ligne de toute façon.

    Vit, merci pour le modifier. J'ai accidentellement de l'onu-il l'a fait alors que j'étais en ajoutant de l'information en même temps que vous avez effectué votre travail d'édition. La révocation a été accidentelle, et une surveillance. La modification de votre édition, où il appartient! =)
    Cela ne fonctionne pas si l'image ne se charge pas. Au moins, dans les derniers FF sur Windows.
    ni dans Firefox 3.6.10 sur Ubuntu 10.04. Voir modifier, et jsbin démo, il devrait maintenant fonctionner.
    Comment définir DOCTYPE dans IE respect de display: inline-block? Merci.
    Il a été un moment depuis que j'ai travaillé avec IE, mais avoir un regard sur: Doctype.com, ou de htmlhelp.com pour des idées. Il dépend essentiellement de votre utilisation, mais je vous recommande personnellement <!DOCTYPE html> maintenant, mais sinon le html ou le xhtml strict sont tous deux de bons.

    OriginalL'auteur David Thomas

  2. 0

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

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

    Si vous padding, border, etc pour 0, vous ne remarquerez pas que la div est là.

    Alors pourquoi l'a mis là? Le div sera shrink-to-fit autour de l'image moins (la div) est mis à display: block ou inline-block. Donc, si vous voulez être ainsi simplement en spécifiant display: block; (ou inline-block) sur la img, plus img accepte width et height attributs pour une raison.
    Non, le div sera pas ajuster autour de l'image - display: block est la valeur par défaut pour un div. D'autre part, en précisant display: block sur l'image serait probablement tout aussi bien. Le problème avec cela est que si vous chargez une image plus petite que le code html spécifié les dimensions, l'image sera déformée.

    OriginalL'auteur Tomas Aschan