2010-09-25 2 views
8

geladen Ich bin ein Bündel img den Laden, und ich mag sie Platz auf dem Dokument zu übernehmen, auch wenn sie nicht geladen ist, oder Ladevorgang noch nicht abgeschlossenWie ein <img> zwingt Breite zu nehmen, auch wenn das Bild nicht

Ich versuchte, Breite und Höhe spezifiziert (beide als Attribute selbst und in einem Stil-Attribute), und es frustrierend, dass die Bilder nehmen nicht Platz finden, wenn sie laden nicht.

Sicherlich muss es eine Möglichkeit geben, ein IMG auf bestimmte Dimensionen ** zu zwingen, auch wenn das Image nicht geladen werden kann.

Dank

Antwort

10

Es ist sicher:

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

Auch der Grund, die Breite und Höhe innerhalb des style="/* css */" Attribut Angabe ist nicht arbeiten, weil Bilder sind standardmäßig in Inline-Elemente . Hätten Sie display: block angegeben, hätte das Bild die Werte width und height akzeptiert.

Wenn Sie hinzufügen, zu der CSS/style:

display: inline-block; 

sollte es funktionieren. Ich bin mir nicht sicher warum Firefox nicht die Attribute Breite/Höhe respektieren, aber immer noch. Auch IE, mit einer definierten doctype sollte display: inline-block beachten, da img Elemente standardmäßig standardmäßig in-line sind.

+0

@Andrew Vit, danke für den Schnitt. Ich habe es versehentlich gelöscht, während ich gleichzeitig mit der Bearbeitung Informationen hinzugefügt habe. Der Widerruf war zufällig und ein Versehen. Editiert deine Editierung zurück, wo sie hingehört! =) –

+0

Dies funktioniert nicht, wenn das Bild nicht geladen wird. Zumindest im neuesten FF unter Windows. – Sambo

+0

@Sambo, noch in Firefox 3.6.10 auf Ubuntu 10.04. Siehe Bearbeiten und [Jsbin Demo] (http://jsbin.com/ojocu3/3/), es sollte jetzt funktionieren. –

0

Die einfache Antwort: wickeln Sie das Bild in einem <div> mit einer festen Breite.

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

Wenn Sie Polsterung, Grenze usw. zu 0 gesetzt ist, wird man nicht feststellen, dass die div da ist.

+0

Warum also dort hin? Das 'div' wird um das Bild * verkleinert, bis * es (das' div') auf 'display: block' oder' inline-block' gesetzt wird. Sie müssten also einfach 'display: block;' (oder 'inline-block') im' img' angeben, und 'img' akzeptiert' width' und 'height' Attribute aus einem bestimmten Grund. –

+0

Nein, das 'div' wird * nicht * verkleinert um das Bild anzupassen -' display: block' ist der Standardwert für ein 'div'.Auf der anderen Seite würde die Angabe von "display: block" auf dem Bild wahrscheinlich genauso gut funktionieren. Das Problem dabei ist, dass das Bild verzerrt wird, wenn Sie ein kleineres Bild als die angegebenen HTML-Dimensionen laden. –

Verwandte Themen