Headbild an alle Bildschirmauflösungen anpassen

[Designer]

Hallo !

Ich habe einmal auf der Homepage eines Forumsmitgliedes (Er oder Sie hatte Verschiedene Berichte auf der Seite) gesehen, dass oben ein Screenbild war, dass sich an die Bildschirmauflösung angepasst hat.

Nun wüsste ich gerne wie das da gemacht ist!?

Weil ich stehe mal wieder vor folgendem Problem:

Wenn ich es als Bild per <img> einfüge, ist esimmer gleich groß

Wenn ich es als Hintergrundbild einfüge ist es halb abgeschnitten

Naja, nun wüsste ich gerne wie ich dasverwirklichen kann...

und zwar wenn möglich ohne CSS, sodass s auch Netscape und Co. verstehen.

Danke.

[NaeZnaL]

Hallo,

<img src="..." alt="..." width="100%">

Mit freudlichen Grüßen, NaeZnaL

[dbenzhuser]

N'Obend

(...) dass sich an die Bildschirmauflösung angepasst hat.

1.1
Die Auflösung hat mit der Browserfenstergröße nicht viel zu tun

Nun wüsste ich gerne wie das da gemacht ist!?

2.1
Schau dir doch an wie das da gemacht wurde :)

2.2
Eine Murkskonstruktion wie <img src="bild.jpg" width="90%" alt="Musikverein Hinterdupfingen"> (Wert je nach Wunsch anpassen) kann da schon helfen. Die Breite skaliert mit dem Fenster, da keine explizite Höhe angegeben ist hält der Browser das Seitenverhältniss.

Warum Murkskonstruktion?

3.1
Wenn der Browser die Größenanpassung vornimmt, sieht das Bild automatisch sche%§$ aus. Der ist einfach nicht dafür gemacht.

4.1
Möglich wäre es vielleicht auch mit Flash, da die Vektorgrafiken problemlos skallieren. Damit heimst du dir aber tausend andere Probleme ein.

Das beste ist,

5.1
du verzichtest darauf. Es ist AFAIK einfach nicht schön hinzubekommen.
Mach ein hübsches Logo, so wie es dir gefällt, achte aber darauf, dass die Seite auch mit 800 Pixeln Browserfensterbreite noch anständig zu betrachten ist.

Tschö,
dbenzhuser

[Sven Rautenberg]

Moin!

Die Breite skaliert mit dem Fenster, da keine explizite Höhe angegeben ist hält der Browser das Seitenverhältniss.

Nein. Wenn keine Werte für Breite und/oder Höhe angegeben sind, nimmt der Browser diese Angaben aus der Grafik. Wird die Breite prozentual angegeben, und keine Höhe, dann wird die Grafik so hoch, wie sie im Original ist. Das Original-Seitenverhältnis bleibt nicht erhalten.

- Sven Rautenberg

[dbenzhuser]

Moin

(...) Das Original-Seitenverhältnis bleibt nicht erhalten.

Meine Versuche mit

• Netscape 4.78
• Opera 7.23
• FireFox 0.8
• IE 6.0

(jeweils mit oder ohne Doctype)

sagen aber was anderes. Es sieht zwar ne nach Browser unterschiedlich grottig aus, aber alle behalten das Seitenverhältnis.

Tschö,
dbenzhuser

[Sven Rautenberg]

Moin!

(...) Das Original-Seitenverhältnis bleibt nicht erhalten.

Meine Versuche mit

• Netscape 4.78
• Opera 7.23
• FireFox 0.8
• IE 6.0

(jeweils mit oder ohne Doctype)

sagen aber was anderes. Es sieht zwar ne nach Browser unterschiedlich grottig aus, aber alle behalten das Seitenverhältnis.

Hm... faszinierend. Kann ich dummerweise nachvollziehen... ;)

- Sven Rautenberg

[Sven Rautenberg]

Moin!

Wenn ich es als Bild per <img> einfüge, ist esimmer gleich groß

Wenn ich es als Hintergrundbild einfüge ist es halb abgeschnitten

Naja, nun wüsste ich gerne wie ich dasverwirklichen kann...

Im Prinzip eigentlich gar nicht. Denn ein Bild besteht aus einer gewissen Anzahl von Pixeln in Breite und Höhe. Eine Bildschirmauflösung auch. Daraus resultiert, dass das Bild bei der einen Auflösung nur die halbe Breite einnimmt, bei der zweiten Auflösung passend von links bis rechts geht, und bei der dritten nur zur Hälfte sichtbar ist.

Bedenke außerdem: Bildschirmauflösung != Fensterbreite.

Natürlich kannst du den vorgeschlagenen Trick verwenden und die Bildbreite auf "100%" setzen. Dann wird das Bild, je nach vorhandener Möglichkeit, gequetscht oder gestreckt. Für irgendwelche Dekorationsbilder, die man nicht lesen können müß, mag das vielleicht funktionieren - spätestens wenn irgendein erkennbarer Text auf dem Bild erscheint, oder wenn Gegenständer aus der realen Welt abgebildet werden sollen, sieht das ziemlich irritierend aus - und der Browser versaut es überdies, indem er einen absolut mieserablen Skalierungsalgorithmus verwendet.

Bleibt als Alternative: Du erstellst für jede Breite ein eigenes Bild. Aber da gehen die Probleme weiter. Welche Breiten gibts denn? Handydisplays haben mit Pech 160 Pixel Breite, TV-Darstellung arbeitet üblicherweise mit 800 Pixeln, PC-Monitore gehen bis zu 1920 Pixeln. Auch wenn auf letztgenannten in der Regel nie im Vollbildmodus gearbeitet wird, sondern die Fenstergröße zumindest in der Breite reduziert ist auf "normalere" Werte zwischen 800 und 1200 Pixel, hast du trotzdem immer noch ein Riesenspektrum abzudecken. Wenn du die Aufgabe ernst nehmen würdest, müßtest du also über 1000 Grafikvarianten anbieten, für jede mögliche Pixelbreite eine!

Und selbst wenn du ein groberes Raster nimmst: Zwischen 640 und 1280 Pixeln im 10er-Raster liegen immerhin noch 64 Stufen.

Außerdem: Die einzige Chance, im Browser die Fensterbreite (nicht die Auflösung) festzustellen, ist Javascript. Das müßte dann das Bild dynamisch einbinden oder irgendwie nachladen. Das bedeutet aber auch, dass du dich auf zwei Dinge verlassen mußt, die nicht immer seltener selbstverständlich sind: 1. Javascript ist eingeschaltet und 2. Javascript kann irgendeine Art von Breite/Auflösung ermitteln. Resultat eines Mißerfolgs wäre, dass du eine Standardbreite benutzen müßtest - und dann wäre der gesamte Aufwand eigentlich für die Katz'.

und zwar wenn möglich ohne CSS, sodass s auch Netscape und Co. verstehen.

Wie erwähnt: Javascript ist sowieso Pflicht. Aber warum man heutzutage noch auf CSS verzichten soll, kann ich nicht ganz nachvollziehen.

Ich persönlich würde die Verwendung von Hintergrundbildern empfehlen, die dann eben so zu gestalten sind, dass das, was möglicherweise abgeschnitten wird, nicht wirklich wichtig ist (Text läßt sich beispielsweise aus dem Hintergrundbild heraushalten und als eigenständiges Text- oder Transparentbild in den Vordergrund packen), und im Falle extremer Überbreite entweder kacheln kann, oder in irgendeiner Weise auf eine Hintergrundfarbe überblendet wird.

- Sven Rautenberg

[Oliver]

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>

[Sven Rautenberg]

Moin!

Hi Sven,

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

Nur so zur Info: _ICH_ hab das Problem nicht.

Au0erdem sieht es genauso grottig aus, wie "width=100%", du hast nur deswegen Glück, dass es das bei dir nicht tut, weil du das Bild auf 50% verkleinerst - da läßt der Browser exakt jeden 2. Pixel in beide Richtungen einfach weg, und das Resultat sieht, egal ob mit oder ohne Anti-Alisasing und Bikubischer Interpolation annähernd gleich gut aus.

Wenn du als Faktor mal was krummes nimmst, z.B. 45% oder 89%, dann sieht dein Vorschlag genauso grottig aus.

Hier ein Beispiel, wie Du das machen kannst:

function setPic(){
 document.write(html);
}
<body onLoad="setPic()">

Und schon zerstört sich die Seite selbst, weil sie onload durch den Bildercode ersetzt wird...

- Sven Rautenberg

[Oliver]

Hi Sven,

erst mal sorry an den, der den Thread eröffnet hat, aber das interessiert mich nun wieder brennend.

Wenn du als Faktor mal was krummes nimmst, z.B. 45% oder 89%, dann sieht dein Vorschlag genauso grottig aus.

Also, ich hab unten ein Beispiel angefügt, das das gleiche mit einem Faktor von 87% - also was Krummes - macht, ohne das HTML dabei zu "zerstören". Bei mir findet der Pixelversatz nicht statt, das Bild steht da wie eine 1.
Hast Du eine Idee, warum das bei mir geht, bei Dir aber grottig aussieht?

Und schon zerstört sich die Seite selbst, weil sie onload durch den Bildercode ersetzt wird...

sicher, hatte ich ja gesagt, s.o.

Btw, der Vorschlag mit den "100%" ist ja nun auch gar nicht schlecht, oder? Ist zumindest wesentlich einfacher.

Grüsse
Oliver

Beispiel:

<!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: 87%
 imgPart = .87;

// 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.getElementById("nix").innerHTML = html;
}

</script>
</head>

<body onLoad="setPic()" onResize="setPic()">
<div id="nix"> </div>
</body>
</html>