Traxus: original Bildgröße merken und Bild anpassen

Beitrag lesen

SELF-Forum

original Bildgröße merken und Bild anpassen

Traxus
– Informationen zu den Bewertungsregeln

Hallo,
ich möchte gerne mit einer Funktion die Bildgröße eines <img>-Tag anpassen lassen, z.B. durch verändern der Fenstergröße. Dabei soll das Größenverhältnis beibehalten werden, und die Bildgröße darf nicht größer als das Originalgröße werden.

Habe mir heute mal kurz ein Dummy gebastelt. Um das Problem zu verdeutlichen. Es funktioniert auch ganz gut, auch in der Verwendung von window.onresize, dass hier nicht eingebaut wurde wegen der Übersicht.

Und da bin ich schon bei meinem Anliegen:
Habe ich irgendeine Chance diese Funktion, z.B. durch ein ganz anderen Ansatz komfortabler zu machen. Z.B. gibt es eine bessere Lösung zum umständlichen zw. Speichern der original Bildgröße.

  
<html>  
<head>  
<script language="JavaScript">  
  
function resize (was, breite, hoehe) {  
  
     var objekt = document.getElementById(was);  
  
     //Speichern der original Bildgröße im Tag des <img>-Elements  
     if (!objekt.tag){objekt.tag = objekt.width + "," + objekt.height;}  
     var original=objekt.tag.split(",");  
  
     //Wenn geforderte Größe die Bildgröße überschreitet  
     if (breite >= original[0] && hoehe >= original[1]){  
         //..dann soll das Bild auf originalgröße gesetzt werden  
         objekt.style.width = original[0]+"px";  
         objekt.style.height = original[1]+"px";  
  
     //,sonst:  
     }else{  
         //Wenn das "Original zu Soll" - Verhältnis in der Breite am größten ist..  
         if (original[0]/breite > original[1]/hoehe) {  
            //..dann soll das Bild an der Breite ausgreichtet werden  
            objekt.style.width = breite + "px";  
            objekt.style.height = original[1]/original[0]*breite + "px";  
         //,sonst:  
         }else{  
            //Soll das Bild an der Höhe ausgreichtet werden  
            objekt.style.height = hoehe + "px";  
            objekt.style.width = original[0]/original[1]*hoehe + "px";  
         }  
     }  
}  
  
</script>  
</head>  
<body>  
<a href="#" onclick="resize('bild', 300, 50)"   >resize auf 300x10</a><br>  
<a href="#" onclick="resize('bild', 50, 700)"   >resize auf 100x700</a><br>  
<a href="#" onclick="resize('bild', 1000, 1000)">resize auf 1000x1000</a><br>  
  
  
<img style="position:absolute; top:100px;" name="" id="bild"  
                  src="http://de.selfhtml.org/src/logo.gif" alt="" border="0">  
</body>  
</html>

Vielen Dank, an alle die sich das Problem annehmen. Danke!

Beitrag melden
–
Informationen zu den Bewertungsregeln