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
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
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
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
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
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
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:
- Mozilla zeigt eine Box mit 1em Höhe und 50% der verfügbaren Breite an.
- Der Internet Explorer 6 stellt die Box mit einer wesentlich größeren vertikalen Ausdehnung dar.
- Die Internet Explorer bis zur Version 5.5 auf Windows haben große Probleme, prozentuale Breiten- und Höhenangaben überhaupt korrekt darzustellen.
- Opera zeigt - wie Mozilla - eine Box mit 1em Höhe und 50% der Breite, lässt aber den Alternativtext weg.