Bild an Fenstergröße anpassen

Demo

Autor: Ich

www.friedels-home.de

IE 5 IE 6 NN 4 NN 6 NN 7 Moz 1 OP 6 OP 7

Ein Bild kann man recht einfach an die Fensterbreite anpassen. Wenn man <img src="bild.gif" border="0" width="100%"> in seinen Quellcode schreibt, wird das Bild "bild.gif" ohne Rahmen so in die Seite eingepasst, dass es die gesamte Breite einnimmt. Wenn das Bild in einem anderen Element, z.B. einer Tabellenzelle ist, nimmt es die gesamte Breite dieser Zelle ein. Wenn man <img src="bild.gif" border="0" height="100%"> in seinen Quellcode schreibt, wird das Bild so in die Seite eingepasst, dass es die gesamte Höhe einnimmt. Wenn man <img src="bild.gif" border="0" width="100%" height="100%"> in seinen Quellcode schreibt, werden die Breite und die Höhe des Bildes angepasst. Natürlich wird das Bild in seiner Form dann an das Fenster angepasst, was meist unerwünscht ist. Um das Bild nicht zu verzerren darf man also immer nur entweder die Breite oder die Höhe festlegen. Da du nicht weißt, ob die maximale Größe des Bildes durch die Breite oder durch die Höhe begrenzt wird, ist das Bild möglicherweise nicht vollständig sichtbar.

Meine Lösung: (die Teile, die von dir angepasst werden müssen wenn du das Script nachbauen willst, sind farbig dargestellt)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Bild an Fenster anpassen</title>
<script type="text/javascript">
<!--
var x;
var y;
var b=358;
var h=236;
var bild="meinBild.gif";
//-->
</script>
</head>
<body onResize="javascript:location.reload()">
<img border=0 src="blind.gif" width="100%" height="1" name="aaa" style="margin-top:-1">
<img border=0 src="blind.gif" width="1" height="100%" name="bbb" align="left">
<script type="text/javascript">
<!--
x=document.aaa.width-10;
y=document.bbb.height-20;
if (x/y>b/h) document.write("<img border=0 src='"+bild+"' height='"+(y-10)+"' style=margin-top:-1>");
else document.write("<img border=0 src='"+bild+"' width='"+(x-1)+"'>");
//-->
</script>
</body>
</html>

Um ein solches Script zu realisieren muss man zuerst die innere Breite und die innere Höhe des Fensters feststellen. Da es keine einfache Methode dafür gibt, die in allen Browser funktioniert, muss man zu einem Trick greifen. Ich verwende dazu ein blind.gif. Das ist ein Bild, das nur 1 Pixel hat. Dieses Pixel ist transparent. Das Bild ist also unsichtbar. Es werden zunächst, wie immer, die benötigten Variablen deklariert. "x" und "y" sind die Breite und Höhe, die maximal für das Hauptbild zur Verfügung stehen. "b" und "h" sind die Breite und Höhe des unskalierten Hauptbildes. "bild" ist die URL des Hauptbildes. Ein blind.gif wird ganz oben in der Seite mit 100% Breite und 1 Pixel Höhe eingefügt und erhält den Namen "aaa" damit es als Objekt angesprochen werden kann. In der nächsten Zeile wird die Breite (in Pixel) dieses Bildes in der Variablen "x" gespeichert. Danach kommt ein blind.gif, das 1 Pixel Breite und 100% Höhe hat. Es bekommt den Namen "bbb". Dieses Bild ist links ausgerichtet damit das eigentliche, sichtbare Bild rechts daneben Platz findet. Die Breite von "bbb" wird in der Variablen "y" gespeichert. Durch diese beiden blind.gifs stehen dem eigentlichen Bild in Breite und Höhe je ein Pixel weniger Platz zur Verfügung. Deshalb wird von "x" und "y" jeweils 1 abgezogen. Damit ist "x" also die Breite die für das Hauptbild zur Verfügung steht, und "y" ist die Höhe, die zur Verfügung steht. Jetzt muss festgestellt werden, ob sich das Bild über die ganze Fensterbreite oder über die ganze Fensterhöhe erstrecken soll. Wenn die Bedingung x/y>b/h erfüllt ist, wird das Bild so hoch dargestellt, wie das Fenster ist. Wenn die Bedingung nicht erfüllt ist, wird das Bild so breit dargestellt, wie das Fenster ist. Leider hält sich den NN in Version 4.x mal wieder nicht an die Normen und lässt zwischen den Bildern Abstände frei. Um zu verhindern dass in diesem Browser der untere oder rechte Rand des Bildes abgeschnitten wird, kann man "y" und "x" verringern. Damit nach einer eventuellen Größenänderung des Fensters das Bild automatisch angepasst wird, habe ich ins Bodytag den den Eventhandler onResize="javascript:location.reload()" eingefügt, der nach eine Größenänderung die Seite neu lädt. Unter Opera 5 und 6 funktioniert dieser Eventhandler nicht. Nach eine Änderung der Fenstergröße wird das Bild nicht automatisch angepasst.

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: