Automatische Skalierung von Bildern

Wie Bilder eingebettet werden

Um Bilder in HTML-Seiten einzubetten, wird das <img>-Element verwendet. Dabei werden normalerweise Angaben zu Breite und Höhe des Bildes gemacht, die abweichend von der natürlichen Bildgröße sein können. Die Bildgröße wird dabei i.d.R. in Pixeln angegeben, so dass das Bild - unabhängig von der Größe des Browserfensters - immer gleich groß ist. Durch eine Breitenangabe in Prozent ist es auch möglich, das Bild unter Berücksichtigung des verfügbaren Platzes darzustellen.

Breite und Höhe

Die natürliche Größe des Bildes wird verwendet, wenn im HTML-Dokument keine Angaben zu Breite und Höhe des Bildes gemacht werden. Die Angabe der Attribute width für die Breite und height für die Höhe wird jedoch empfohlen. Der Browser kann dann bereits während des Ladens Platz für das Bild reservieren und das Dokument darstellen, während im Hintergrund das Bild noch geladen wird.

Werden width und height angegeben, werden diese Angaben für die Darstellung verwendet. Sie haben Vorrgang vor der natürlichen Breite und Höhe des Bildes. Mit diesen Angaben kann eine verkleinerte oder vergrößerte Darstellung des Bildes zum Original erreicht werden. Um Verzerrungen zu vermeiden, sollte das Verhältnis Breite zu Höhe im <img>-Element dem Verhältnis des Originalbildes entsprechen.

Wenn im <img>-Tag nur eine Angabe zur Breite des Bildes vorhanden ist, kann der Browser unter Berücksichtigung der natürlichen Bildgröße die passende Höhe selbst berechnen - wenn er das Bild laden kann. Wenn das Bild nicht geladen werden kann, kann die neue Höhe nicht berechnet werden, und es bleibt dem Browser überlassen, wieviel Platz er für das Bild freilässt. Unter Umständen entspricht die Darstellung dann nicht unbedingt den Erwartungen des Autors.

Wenn der Platz nicht ausreicht

Was passiert aber, wenn der Anwender das Browserfenster soweit verkleinert, dass der Platz für die Bilddarstellung nicht ausreicht? Das Bild hat ja normalerweise eine Größe, die in Pixel angegeben wird, und die verfügbare Fläche zur Darstellung kann ja durchaus kleiner sein.

Der Browser wird zuerst einen Teil des Bildes überlappend mit anderen Bereichen darstellen. Wenn das Browserfenster noch weiter verkleinert wird, blendet der Browser schließlich horizontale oder vertikale Scrollbalken ein.

Skalierung

Es gibt eine einfache Möglichkeit, diesn Effekt zu vermeiden. Die Breiten- und Höhenangabe im <img>-Element kann auch prozentual erfolgen. Das Bild wird dann unter Berücksichtigung des verfügbaren Platzes dargestellt. Eine Angabe von width="50%" bewirkt, dass das Bild immer die Hälfte des verfügbaren Platzes einnimmt. Wenn der Anwender das Browserfenster verkleinert, betrifft dies somit auch das eingebettete Bild. Die Angabe zur Höhe des Bildes sollte in diesem Fall weggelassen werden, um ungewünschte Verzerrungen zu vermeiden.

Voraussetzung zur korrekten skalierten Darstellung eines Bildes ist, dass das Bild vom Browser geladen werden kann. Denn wie bereits oben beschrieben, muss zur Berechnung der Höhe die natürliche Größe des Bildes vorhanden sein.

Beispiele

Natürliche Größe

Testbild ohne width und height

Dieses Bild hat eine natürliche Größe von 600 x 400 Pixeln. Im <img>-Element fehlen die Angaben zu Breite und Höhe, so dass das Bild in seiner Originalgröße dargestellt wird.

Feste Größe

Testbild mit Größenangabe in Pixeln

Dieses Bild ist dasselbe wie im vorangegangenen Beispiel. Durch die explizite Angabe von Breite und Höhe wird es auf die gewünschte Größe von 300 x 200 Pixel gebracht. Das Bild hat immer diese Größe; unabhängig davon, wie klein oder groß das Browserfenster gemacht wird.

Feste Größe

Testbild mit verzerrter Darstellung

Wenn das Verhältnis von Breite zu Höhe im <img>-Element nicht dem Verhältnis im natürlichen Bild entspricht, lassen sich Verzerrungen bei der Darstellung erzielen. Weil bei einer Breite von 300 Pixeln nur eine Höhe von 50 Pixeln angegeben ist, wird der Kreis zur Ellipse.

Variable Größe

Testbild mit prozentualer Breite

Dieses Bild nimmt in seiner Breite immer die Hälfte der verfügbaren Breite ein, weil die Angabe bei width in Prozent erfolgt. Das Bild verändert seine Größe mit der Größe des Browserfensters.

Feste Größe ohne Bild

Dieses Bild wird nicht gefunden

Das Bild, das hier angezeigt werden soll, wird nicht gefunden. Statt dessen wird der Text angezeigt, der im alt-Attribut steht. Weil Breite und Höhe angegeben sind, wird bei der Darstellung nur der Platz freigehalten, den das Bild einnehmen würde.

Variable Größe ohne Bild

Dieses Bild wird nicht gefunden

Auch dieses Bild wird nicht gefunden. Im Gegensatz zum Beispiel vorher fehlt die explizite Angabe der Höhe. Der Browser müsste jetzt aus der natürlichen Bildgröße die Höhe berechnen. Das geht aber nicht, weil er ja das Bild nicht laden kann. Somit bleibt es dem Browser überlassen, welche Höhe er für die Darstellung freilässt.

Wie die verschiedenen Browser mit dem Problem umgehen, ist höchst unterschiedlich: