Abonnieren
Die meisten modernen Browser unterstützen mittlerweile zoomende Bilder – das sind Bilder, die mit dem Browserfenster vergrößern und verkleinern. Und es ist obendrein total einfach, wie das folgende Beispiel zeigt. Es sollte in allen Mozilla-Browsern, Firefox, Opera, Safari und sogar im im Internet Explorer 6 funktionieren. Wenn es nicht funktiooniert, ist das kein Problem: das Bild wird einfach in der Größe gezeigt, in der es eingebunden wurde.
Das folgende Bild sollte mit dem Browserfenster skalieren, jedoch nur bis zur maximalen Bildgröße von 600 Pixel Breite. Dabei bleibt das Seitenverhältnis erhalten.
Es ist ganz simpel: der IMG-Tag bekommt einfach keine Größenangaben, statt dessen wird im CSS-Stil eine Breite in Pozent definiert. Damit das Bild nicht größer wird als seine eigene Pixelgröße vorgibt (wodurch die Qualität stark absinken würde, also das Gegenteil des gewünschten Effekts eintritt) wird zusätzlich eine maximale Breite angegeben. Das ganze kann im Quellcode also so aussehen:
<img src="datei.jpg" alt="Bild" style="width:100%;max-width:600px" />
Den Vorteil sehe ich darin, dass ich den Besuchern ein Bild in hoher Qualität präsentieren kann, das sowohl auf einem kleinem wie auf einem großem Monitor betrachtet werden kann. Die Qualität bleibt nämlich beim Verkleinern weitgehend erhalten. Die maximale Größe definiere ich, damit das Bild nicht größer wird als seine »echte« Größe in Pixel. Das hätte sonst den Effekt, dass die Qualität wieder schlechter wird, die zusätzliche Vergrößerung dem Betrachter also nichts mehr bringt. Einen Nachteil sehe ich allerdings auch, nämlich die Dateigröße. Das Bild muss immer in der maximalen Größe eingebunden werden.
Und der umfließende Text. Dieses Bild habe ich mit 50% und einer Maximalgröße von 200 Pixel eingefügt, so dass der Text bei größerem Fenster mehr Platz bekommt.
Ich muss sagen, das gefällt mir schon sehr – ich schätze, ich werde meine Stile umstricken, so dass diese Funktion standardmäßig verwendet wird, wenn ich Bilder einfüge.
Eine kleine Anmerkung zum Internet Explorer: er kann das Bild zoomen, aber er unterstützt den Stil »max-width« nicht. Die Bilder zoomen also im IE immer bis zur maximalen Größe.
Screenshots sind natürlich empfindlich gegen eine Änderung der Größe – hier wird also die Qualität sehr stark vom jeweiligen Browser abhängen und insgesamt schlechter ausfallen als bei JPG-Bildern.
Wie man sieht, ist das Ergebnis bei einer erheblichen Verkleinerung nicht mehr besonders. Trotz dynamischem Zoom würde ich also hier doch ein JavaScript-Popup einbauen, so dass auch Besucher mit kleinen Monitoren den Screenshot in voller Größe sehen können. Also: Klick aufs Bild :-)
Von Peter am 21.11 um 18:51 Uhr. Kategorie: HTML-CSS | Barrierefreiheit
Trackback-URL: http://www.lisardo.de/trackback/102/0AwWBY4i/