Bildergröße in Box einpassen

[R_o_b]

Salute zusammen,

noch eine Frage. Ich lade mit JavaScript neue Bilder unterschiedlicher Größe in ein , in welchem die Größe „CLogoHmax“ (height) und „CLogoWmax“ (width) nicht überschritten werden dürfen. Die Proportionen sollen natürlich erhalten bleiben.

Ich habe hierfür folgende Zeilen (in einer for-Schleife mit Index i):

newCLogo = new Image();
newCLogo.src = CLogoPath+Sammlung[i]["CLogo"];
document.getElementsByName('STCLogo')[i].style.width = 'auto'; // Zurücksetzen von Abmessungen voriger Grafik auf 'auto'
document.getElementsByName('STCLogo')[i].style.height= 'auto'; // Zurücksetzen von Abmessungen voriger Grafik auf 'auto'
if (newCLogo.width / CLogoWmax \> newCLogo.height / CLogoHmax) {
 document.getElementsByName('STCLogo')[i].style.width = CLogoWmax;
 } else {
 document.getElementsByName('STCLogo')[i].style.height = CLogoHmax;
};
document.getElementsByName('STCLogo')[i].src = newCLogo.src;

(Alle meine Grafiken sind größer als die Maximalwerte). Das Zurücksetzen von width und height auf ‚auto‘ ist nötig, weil die Änderung von nur einem Dimensionswert sonst nicht die gewünschte proportionale Verkleinerung erzeugt. Die if-Abfrage prüft, ob height oder width der Grafik proportional größer ist und reduziert den höheren Wert im img. Es funktioniert fast immer, aber manchmal eben auch nicht: Manche Grafiken werden beim ersten Laden nur durch die else-Bedingung in ihrer Größe verändert (sind also zu breit). Beim nächsten Laden derselben Grafik klappts dann.

Was könnte hier falsch sein?

Vielen Dank für Eure Ideen und einen schönen Abend…
-Rob.

[KKO_ae7027]

Hi Rob,

hängt wohl damit zusammen, dass die Grafik-Datei bei der if-Abfrage noch nicht geladen ist.

Wäre also sinnig, dem img-object ein onload=function() zu geben, in der dann erst der „Größentest“ stattfindet.

Gruß
Klaus

[R_o_b]

Nach ‚onload‘ klappts.
Super Tipp. Danke.

Ich habe inzwischen herausgefunden, daß das Script weiterläuft, noch während die Datei lädt (daher auch die „complete“-Eigenschaft).

Nun läufts.

Mechßi eh oh räwoaah
-Rop.

[KKO_ae7027]

hi Rob,

Ich habe inzwischen herausgefunden, daß das Script
weiterläuft, noch während die Datei lädt (daher auch die
„complete“-Eigenschaft).

complete ist zwar nicht W3C konform, aber wird von den meisten Browser unterstützt.
Du nimmst aber onload und function … nicht das Du in einer Schleife auf complete prüfst ))

Ein Vorschlag:
width und height der Box immer auf den max-Werten lassen
width und height der Grafik gegen max-Werte prüfen
da wo der Grafik-Wert größer als der max-Wert ist, diesen auf 100% setzen
das Skalieren übernimmt der Browser
dann steht die Box immer „ruckelfrei“ im Inhalt

Gruß
Klaus

[R_o_b]

Muß Größe erst auf ‚auto‘ zurücksetzen
Hey Klaus,

complete ist zwar nicht W3C konform, aber wird von den meisten
Browser unterstützt.
Du nimmst aber onload und function … nicht das Du in einer
Schleife auf complete prüfst ))

Nö, isja häßlich Aber wenn’s ohnehin nicht W3C-sanktioniert ist…

Ein Vorschlag:
width und height der Box immer auf den max-Werten lassen
width und height der Grafik gegen max-Werte prüfen
da wo der Grafik-Wert größer als der max-Wert ist, diesen auf
100% setzen
das Skalieren übernimmt der Browser
dann steht die Box immer „ruckelfrei“ im Inhalt

Geht leider auch nicht, denn die Grafik soll von immer neuen überschrieben werden. Daher muß ich erst ein 1-Pixel-Gif laden, height und width jeweils auf „auto“ setzen, und dann kann ich mit onload die Größenprüfung/-Änderung vornehmen. Zur Vermeidung von zuckenden Grafiken setze ich sie vor dem laden auf ‚display:none;‘ und nach der Größenanpassung auf ‚display:inline;‘. Ist zwar alles sehr umständlich, aber so scheints zu klappen.

Nochmals ganz vielen lieben dank für Deine zahlreiche und kompetente Hilfe.

Grüßken
-Rob.