Grafik Breite dem Browser anpassen.

[MB]

Ich habe eben mit Javascript begonnen, da PHP es nicht schafft, bilder an das Browser-Fenster anzupassen.

In der Regel habe ich Fotos von 1024 Pixel breite.
Wenn jemand eine kleinere Auflösung hat (oder es in einem kleineren Fenster ansieht),
passt das natürlich nicht.

D.h. die Grafik soll normalerweise in 1024 Pixel breite angezeigt werden,
und wenn das fenster kleiner ist, soll es entsprechend skaliert werden.
Bzw. nur beim Seitenaufruf, dynamisches nachskalieren wäre nicht so wichtig
(solche spielereien mach ich erst später, wenn das ganze mal sauber läuft).

Den folgenden Code habe ich durch suchen hier im forum zusammen gestellt.
Leider funktioniert er nicht...
Nur ein Syntaxfehler oder habe ich prinzipiell einen Denkfehler?

Ich verwende Breite und Größe (anstatt dem HTML-Befehl "width = 100%")
da ansonsten fotos mit 680x1024 größer dargestellt werden wie 1024x680.



<img src='fotos/f0/00029.jpg' id='fotoa'>

<script type="text/javascript">
<!--
var fotoa_window_width = 0
if(typeof(window.innerWidth) == 'number')
{
fotoa_window_width = window.innerWidth;
}
else if
{
fotoa_window_width = document.body.clientWidth;
}

var fotoa_scala = fotoa_window_width/1024;
if (fotoa_scala < 1)
{
var fotoa_bild = document.getElementById("fotoa");
var fotoa_image_width = fotoa_bild.style.width * fotoa_scala;
var fotoa_image_height = fotoa_bild.style.height * fotoa_scala;
fotoa_bild.style.width = fotoa_image_width;
fotoa_bild.style.height = fotoa_image_height;
}
-->
</script>

 

[Gast2]

Du bist im falschen Forum
http://www.java-forum.org/top-fragen/5566-java-javascript.html

Ansonsten fürs Dbugging entweder unter Firefox die Extension FireBug installieren oder im Chrome per F12 die Konsole öffnen, da werden Javascript Fehler angezeigt.

 

[Evil-Devil]

Erstmal die Frage vorweg. Werden die Grafiken innerhalb deines Layouts in Original Größe angezeigt oder erst auf Knopfdruck, zb. via Galerie-Skript? Falls letzteres zutrifft, würde ich einfach zu einer der vielen Galerie Versionen greifen. jQuery und Prototype haben da recht viel Auswahl.

 

[HimBromBeere]

Seit CSS2 gibt es glaub ich eine Eigenschaft, die sich

max-width

nennt. Also kannst die Breite weglassen und als

max-width 1024

angeben.