Bild dynamisch an der Anzeigebreite des Browsers anpassen

Das Einfügen von Bildern mit dem img-Tag hat einen Nachteil. Für die Darstellungsbreite ist das width-Attribut maßgeblich; zum schnelleren Anzeigen des HTML-Dokuments im Browserfenster zusätzlich das height-Attribut. Die Angabe der Bildgröße erfolgt entweder über den Parameterwert in Punkten oder Prozent.
Gerade große Grafiken werden mit den Punktangaben, die dem Bildformat entsprechen, bei kleinen Bildschirmauflösungen zu groß eingebunden, ebenso wie kleine Grafiken mit Prozentangaben bei großen Bildschirmauflösungen. Abhilfe schafft folgendes JavaScript, das allerdings nur das width-Attribut setzt. Dies sollte jedoch in der Praxis meist ausreichen.

	Position in der html-Datei: body-Bereich. Das JavaScript ermittelt die Fenster- bzw. Frame-Seitenbreite und skaliert ein Bild solange, bis die definierte Größe erreicht ist; eingefügt wird das Script im body-Bereich an der Stelle, wo die Grafik stehen soll, mit den Zeilen ...
<script type="text/javascript"> // (c) 2000 by Günther Schleu <!-- if (navigator.appName.indexOf('Netscape') != -1) { FensterBreite = self.innerWidth } else if (navigator.appName.indexOf('Microsoft') != -1) { FensterBreite = document.body.clientWidth }; var breite = 815; // Bildbreite in diesem Beispiel var picweite; picweite = ( FensterBreite >= breite ) ? breite : "100%" document.write("<img src=\"%path%/bildname.jpg\" border=\"0\" width=\""+picweite+"\" alt=\"\" align=\"left\" \/>"); //--> </script> <noscript> <img src="%path%/bildname.jpg" border="0" width="815" alt="" align="left" /> </noscript>

Beispielseite 1 hierzu; Beispielseite 2.

Einschränkungen: Der Pfad- und Dateiname zusammen dürfen nicht länger als 32 Zeichen lang sein.

Anmerkungen:
Das alt-Attribut sollte stets gesetzt sein und wenn sinnvoll, eine kurze Bildbeschreibung beinhalten. Die Schreibweise alt="" verhindert, dass der Browser ‚Bild‘ oder ‚Image‘ in den Rahmen schreibt.
Zum vollständigen Umbruch des Textes nach einem Bild kann der Tag <br clear="all" /> eingefügt werden. Netscape erwartet dann allerdings, dass das Bild mit align="..." formatiert wird.

	Position in der html-Datei: body-Bereich. Das Script lässt sich modifizieren, wenn in einem Zwischenbereich eine angepasste Bildbreite benötigt wird. Im folgenden soll ein Bild mit einer Breite von 1000 Punkten nicht kleiner als 600 Punkte breit eingebunden werden:
<script type="text/javascript"> // (c) 2000 by Günther Schleu <!-- if (navigator.appName.indexOf('Netscape') != -1) { FensterBreite = self.innerWidth } else if (navigator.appName.indexOf('Microsoft') != -1) { FensterBreite = document.body.clientWidth }; var breite = 1000; // Bildbreite in diesem Beispiel var minbreite = 600; var picweite; picweite = ( FensterBreite >= breite ) ? breite : ( ( FensterBreite < minbreite ) ? minbreite : "100%" ) document.write("<img src=\"%path%/bildname.jpg\" border=\"0\" width=\""+picweite+"\" alt=\"\" align=\"left\" \/>"); //--> </script> <noscript> <img src="%path%/bildname.jpg" border="0" width="100%" alt="" align="left" /> </noscript>
Beispiel zum zweiten Script.