relative und absolute Bildgröße kombinieren

[Ulf]

Ich möchte ein Hintergrundbild in der Breite so definieren, dass es zu 100% passt. Die Höhe soll jedoch darauf abgestimmt sein, so dass das Bild nicht verzerrt wird. Schön wäre es, wenn ich zuguterletzt noch eine maximale Breite in Pixeln angeben könnte.

MfG
Ulf

PS. es handelt sich um den roten Drachen

[Kess]

Hallo Ulf,

Ich möchte ein Hintergrundbild in der Breite so definieren, dass es zu 100% passt. Die Höhe soll jedoch darauf abgestimmt sein, so dass das Bild nicht verzerrt wird. Schön wäre es, wenn ich zuguterletzt noch eine maximale Breite in Pixeln angeben könnte.

Das erreichcht du durch dynamisches Schreiben der Seite mittels eines kleinen JavaScripts.

function Picture(pic,picw,pich) {
  #
  # Fenster-/Framebreite ermitteln
  if (document.layers) {
    #
    # fuer Netscape Navigator
    l_height = this.innerHeight;
    l_width = this.innerWidth;
  }
  if (document.all) {
    #
    # fuer Microsoft Internet Explorer
    l_height = document.body.clientHeight;
    l_width = document.body.clientWidth;
  }
  #
  # ist die Fenster-/Framehoehe kleiner der Bildhoehe, dann prozentuale Hoehe errechnen
  if (l_height < pich) l_fach = parseInt(l_height * 100 / pich);
  else l_fach = 100;
  #
  # ist die Fenster-/Framebreite kleiner der Bildbreite, dann prozentuale Breite errechnen
  if (l_width < picw) l_facw = parseInt(l_width * 100 / picw);
  else l_facw = 100;
  #
  # ausgehend vom kleineren proentualen Wert die anzuzeigende Hoehe und Breite ermitteln
  if (l_fach < l_facw) {
    l_dish = parseInt(pich * l_fach / 100);
    l_disw = parseInt(picw * l_fach / 100);
  }
  else {
    l_dish = parseInt(pich * l_facw / 100);
    l_disw = parseInt(picw * l_facw / 100);
  }
  #
  # Code zum Image definieren
  l_source =  '<img src="' + pic + '" width="' + l_disw + '" height="' + l_dish + '" border="0" alt="">';
  #
  # Code zurueckgeben
  return(l_source);
}

Die Aufrufparameter bedeuten:
pic = URL des Images
picw = maximale Breite des Images
pich = maximale Hoehe des Images

Das Script ermittelt die maximal passende Groesse des Bildes und generiert den entsprechenden HTML-Code. Dabei wird das Image niemals groesser als in Originalgroesse dargestellt, wohl aber kleiner, falls der entsprechende Anzeigebereich zu klein ist.
Im Body der Seite erfolgt dann folgender Aufruf an der Stelle, wo das Bild erscheinen soll:

<script language="JavaScript" type="text/javascript">
document.write(Picture("image.gif",640,480));
</script>

Vorsicht: Das Script funktioniert nicht mit aelteren Browsern. Bei einem Resize muss die Seite neu aufgebaut werden, damit die Imagegroesse mit angepasst wird. Und fuer den Netscape Navigator muss beim dynamischen Schreiben des Seitencodes der komplette Body in ein document.wite gepackt werden.
Insgesamt sind es also ziemliche Umstaende, nur um eine Maximalgroesse angeben zu koennen. Kannst du darauf verzichten, reicht die Angabe von prozentualen Werten fuer Breite und Hoehe auch aus:

<img src="image.gif" width="75%" height="75%'" border="0" alt="">

Viele Gruesse
  Kess