Oliver: Headbild an alle Bildschirmauflösungen anpassen

Beitrag lesen

Hi Sven,

das könntest Du mit Javascript lösen, sieht nicht grottig aus ist aber dafür bischen aufwendiger als "width="100%".

In meinem Beispiel müsstest Du den ganzen Code aus JS heraus generieren, Du kannst aber das Bild auch in einen Layer packen, und den mit innerHTML füllen, dann stört es den Rest Deiner Seite nicht.

Anzeigebeispiel:
http://wwfu.dyndns.org/hanse/imgTest/index.html
(Achtung: der Reload geht hier ja nicht ;) Besser lokal testen)

Hier ein Beispiel, wie Du das machen kannst:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Auto-Resize Beispiel </title>
<script type="text/javascript">

// das ist für den IE, bei NN heissen
// die Werte bischen anders, das wird
// aber in Stefans Referenz super beschrieben

function setPic(){

// Name des Bildes
 imgFileName = "test.jpg";

// Orginalgrösse
 imgWidth = 800;
 imgHeight = 600;

// Anteil des Bildes an der Breite
 // der darstellbaren Fläche im Fenster
 // aktuell: 50%
 imgPart = .5;

// Seitenverhältnis des Bildes
 imgRatio = imgHeight/imgWidth;

// Grösse der Darstellbaren Fläche im Dokument
 docWidth = parseInt(document.body.clientWidth);
 docHeight = parseInt(document.body.clientHeight);

// Berechnen der notwendigen Bildbreite
 // die '-25' sind für den Scrollbalken im IE
 if(imgWidth > (docWidth * imgPart) - 25) imgWidth = parseInt((docWidth * imgPart) - 25);

// Berechnen der Bildhöhe
 imgHeight = parseInt(imgWidth * imgRatio);

// HTML generieren
 html = "<center>";
 html += imgWidth + " / " + imgHeight + "<br>";
 html += "<img src='" + imgFileName + "' width='" + imgWidth + "' height='" + imgHeight + "'>";
 html += "<center>";

// HTML ins Dokument schreiben
 document.write(html);
}

</script>
</head>

<body onLoad="setPic()">

</body>
</html>