Seite 1 von 1
[JavaScript] Bildgröße proportional ändern
Verfasst: 03.01.2010 19:41
von 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;
Re: [JavaScript] Bildgröße proportional ändern
Verfasst: 03.01.2010 19:58
von TomS
Code: Alles auswählen
var faktor;
if (MaxWidth < MaxHeight)
{
faktor = ImgWidth / MaxWidth;
}
else
{
faktor = ImgHeight / MaxHeight;
}
ImgWidth * faktor;
ImgHeight * faktor;
Re: [JavaScript] Bildgröße proportional ändern
Verfasst: 03.01.2010 20:33
von 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
Re: [JavaScript] Bildgröße proportional ändern
Verfasst: 03.01.2010 20:56
von 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.
Re: [JavaScript] Bildgröße proportional ändern
Verfasst: 04.01.2010 10:16
von 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
Re: [JavaScript] Bildgröße proportional ändern
Verfasst: 05.01.2010 15:48
von 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.
Re: [JavaScript] Bildgröße proportional ändern
Verfasst: 05.01.2010 17:26
von 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%';
}
Re: [JavaScript] Bildgröße proportional ändern
Verfasst: 05.01.2010 17:38
von 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)