Sven Rautenberg: Headbild an alle Bildschirmauflösungen anpassen

Beitrag lesen

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