✔ Problem mit Bildgröße

[warcraft9105]

Hallo,
ich möchte eine Bild in seiner vollen Größe anzeigen sofern seine Breite nicht über 250px geht. Das Bild wird mir in einem DIV angezeigt der standardmäßig display:none ist. Wenn ich nun auf ein Bild gehe(verkleinerte Version) zeigt er mir das Bild in diesem DIV an nur ebenin seiner vollen Größe. Das will ich eben nicht, sondern dass das Bild eine max. Breite von 250px hat.
Was ich bis jetzt habe:

function show_image (img){
        document.getElementById("show_image").style.display = "";
        document.getElementById("img").src = img;
        
        if(document.getElementById("img").width > "250px")
            document.getElementById("img").width = "250px";
        else if(document.getElementById("img").width < "250px")
            document.getElementById("img").style.height = document.getElementById("img").height;
}

 

[Sven Mintel]

Die Abmaße eines Bildes sind erst bekannt, wenn es Fertiggeladen ist, dies muss bei deinem Versuch nicht unbedingt der Fall sein.

Lade erstmal das Bild, indem du ein neues Image()-Objekt erzeugst, und initiiere das Anzeigen beim onload des erzeugten Image-Objektes.

 

[warcraft9105]

Kann mir da jetzt nicht unbedingt einen Code vorstellen. Kannst du mir den evtl. posten

 

[Sven Mintel]

Jo, ausnahmsweise

function show_image (img)
{
  o=new Image();
  o.onload=function()
    {
      document.getElementById("img").src = img;
      document.getElementById("img").width = Math.min(250,this.width);
      document.getElementById("show_image").style.display = "";
     }
  o.src=img;
}

(Das Setzen der Höhe habe ich aus Faulheit mal eingespart...heutzutage skalieren die Browser das von selbst, wenn nur einer der Werte für Höhe oder Breite gesetzt wird)

 

[warcraft9105]

Danke funktioniert soweit. Jetzt habe ich noch eine kleine jämmerliche Frage (eig. schon fast peinlich): Wie kann ich ein Bild zenitrieren ohne <center> zu verwenden

 

[Sven Mintel]

Kommt drauf an, wo es sich befindet.... gebe dem Elternelement bspw. per CSS ein "text-align:center"

 

[warcraft9105]

Danke geht