nicht angemeldet
original Bildgröße merken und Bild anpassen
Gunnar Bittersmann
Matthias ApselHallo,
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!
-
@@Traxus:
nuqneH
ich möchte gerne mit einer Funktion die Bildgröße eines <img>-Tag anpassen lassen
Tag?? Und warum denkst du, dafür JavaScript zu benötigen?
Was genau hast du vor? Vermutlich geht es mit CSS.
<script language="JavaScript">
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
