[JavaScript] Bildgröße proportional ändern

[Programie]

Hi,

Ich habe auf meiner Homepage ja einige Bilder (von meinen Programmen, Spielen, etc.) und da möchte ich nun gern, dass wenn man auf das Vorschaubild klickt, dass dann das Bild auf die Browsergröße vergrößert wird.
Ich lege dafür das Bild in einem div üeber die Seite. Das funktioniert auch soweit. Doch wenn das Bild ein anderes Seitenverhältnis als der Browseranzeigebereich hat, passt das Bild nicht ganz auf die Seite.
Wie kann ich mit JavaScript die Bildgröße an den Anzeigebereich des Browsers anpassen?
Das Problem dabei ist die richtige Formel.

Also wie ich die Größe des Anzeigebereichs vom Browser und die Größe vom Bild auslese, weis ich bereits:

Code: Alles auswählen

Image=new Image();
Image.src="http://www.irgendwas.de/bild.jpg";
MaxWidth=document.body.clientWidth;
MaxHeight=document.body.clientHeight;
ImgWidth=Image.width;
ImgHeight=Image.height;

[TomS]

Code: Alles auswählen

var faktor;
if (MaxWidth < MaxHeight)
{
    faktor = ImgWidth / MaxWidth;
}
else
{
    faktor = ImgHeight / MaxHeight;
}

ImgWidth * faktor;
ImgHeight * faktor;

[Programie]

Also das funktioniert fast. Ich musste jedoch deinen Code etwas umändern:

Code: Alles auswählen

if (MaxWidth<MaxHeight)
	{
	Factor=MaxWidth/ImgWidth;
	}
else
	{
	Factor=MaxHeight/ImgHeight;
	}

Factor war bei deinem Code größer als 1, was ja das Bild noch größer machen würde.
Der Code hat aber noch ein paar Fehler.
Und zwar ist manchmal die berechnete Breite größer als die Browserbreite.

Beispiel:
Browsergröße: 624 x 615
Bildgröße: 1920 x 1200
Ausgerechnete Größe: 983 x 615

[TomS]

Das war schon i.O. so. Außer dein Bild is größer als die Browserdimensionen.
In dem Fall musst du erst überprüfen.

Code: Alles auswählen

if (Imagewidth>MaxWidth or ImageHeight>MaxHeight){
    // Dein Code
}else{
    // Mein Code
}

Dann wird nämlich bei deinem Beispiel dein Code ausgeführt (also der Kehrwert eigentlich).

624 / 1920 = 0,325
0,325 * 1920 = 624 -> Das Bild ist jetzt genauso breit wie der Browser.
Dann musst du noch 50px von MaxWidth und MaxHeight abziehen um einen Rand zu schaffen^^

Dass da 983 rauskommt anstatt 624 halte ich für unwahrschinlich, zumal die Höhe ja genau so groß ist, wie das Bild.

[tmjuk]

Blos eine dumme Frage.
Warum ausrechnen? Geht das nicht auch mit HTML-Prozentangaben?

Code: Alles auswählen

<p><img src="001.jpg" width="90%" height="90%" title="Bild 1" alt="Bild 1"></p>

Oder so ähnlich?

Torsten

[Programie]

Dabei wird das Bild gestreckt.
Und wenn ich nur die Breite oder Höhe angebe, kann es sein dass die andere Seite Größer als die Browserseite ist.
z.B. ich habe ein Bild mit der Größe 100 x 1200 und mein Browserfenster ist 800 x 600 groß.
Und ich setze nur die Breite auf 100%. Dann ist das Bild zwar 800 Pixel breit, aber die Höhe ist 9600 Pixel hoch, da ja durch die Breite auch die Höhe gestreckt wird.
Und daher muss ich die Größe selbst berechnen.

[TomS]

Hm. Du könntest es trotzdem so machen.

Code: Alles auswählen

If (ImageHeight>Imagewidth){
    GetElementByID('image').SetAttribute('width') = '100%'; 
}else{
     GetElementByID('image').SetAttribute('height') = '100%';
}

[tmjuk]

Tja wie erklär ich dir das nun am besten.
Deutsche Sprache - schwere Sprache

Also nehmen wir dein Beispiel:
Du hast ein Bild 100x1200 pxl.
Dein Bildschirm hat 800x600 pxl.
Jetzt prüfst du welcher Wert (x oder y) über die Bildschirmgrenze geht.
In diesem Fall die 1200.
Also muss es hier heissen

Code: Alles auswählen

<p><img src="001.jpg" height="90%" title="Bild 1" alt="Bild 1"></p>

Ist der X-Wert grösser

Code: Alles auswählen

<p><img src="001.jpg" width="90%" title="Bild 1" alt="Bild 1"></p>

Um die Sache perfekt zu machen (falls zum Beispiel beide Werte zu gross sind), ausrechnen lassen welcher der
beiden Werte im Verhältnis gesehen grösser ist.

Also jetzt mal als Pseudocode:

Code: Alles auswählen

if xwert_bild/xwert_bildschirm > ywert_bild/ywert_bildschirm
{
<p><img src="001.jpg" width="90%" title="Bild 1" alt="Bild 1"></p>
}
else
{
<p><img src="001.jpg" height="90%" title="Bild 1" alt="Bild 1"></p>
}

Probiers mal aus. Müsste doch eigentlich funktionieren.

Torsten

PS Typos ausgemerzt (width)