Bild strecken. Höhe ändern, Breite beibehalten.

[Florian Richter]

Hallo,

ich habe wieder einmal ein Problem. Für eine Physikseite möchte ich das Bild einer Feder nehmen (hab ich schon) und möchte das Bild mit einer beliebigen Javascript-Variable strecken, d.h. es soll länger werden, während die Breite gleich bleiben soll.

Beispiel: Breite des Bildes sei fest 100px und die Höhe/Länge soll änderbar sein, sodass man das Bild strecken oder stauchen kann.

Gruß und Danke für die Hilfe, Florian

[ChrisB]

Hi,

ich habe wieder einmal ein Problem.

Dann beschreibe es uns doch bitte.

Für eine Physikseite möchte ich das Bild einer Feder nehmen (hab ich schon) und möchte das Bild mit einer beliebigen Javascript-Variable strecken

Erlaubnis erteilt.

Fragen?

MfG ChrisB

[Florian Richter]

Hi,

ich habe wieder einmal ein Problem.

Dann beschreibe es uns doch bitte.

Für eine Physikseite möchte ich das Bild einer Feder nehmen (hab ich schon) und möchte das Bild mit einer beliebigen Javascript-Variable strecken

Erlaubnis erteilt.

Fragen?

MfG ChrisB

Hallo,

erstmal Danke für die schnelle Antwort. Für mich ist mein Problem klar. Sorry, wenn es unverständlich war.

Ich habe schon gegooled, leider ohne Erfolg.
Mein Problem: Normalerweise wird das Bild doch im gleichen Verhältnis zu den 2 Seiten gestreckt. Aber die Breite soll bleiben und das Seitenverhältnis des Bildes soll sich ändern...

Gruß Florian

[ChrisB]

Hi,

bitte sinnvoll zitieren - das, worauf du dich konkret beziehst, und nicht einfach alles!

Ich habe schon gegooled, leider ohne Erfolg.

Nach was?

Mein Problem: Normalerweise wird das Bild doch im gleichen Verhältnis zu den 2 Seiten gestreckt.

Es gibt kein "normalerweise". Was passiert, hängt davon ab, was du angibst.

Aber die Breite soll bleiben und das Seitenverhältnis des Bildes soll sich ändern...

Schön. Dann ändere den Wert der einen Längenangabe, und behalte den der anderen bei.

MfG ChrisB

[Gunnar Bittersmann]

@@Florian Richter:

nuqneH

Hi,
--8<--
MfG ChrisB

Zitiere bitte sinnvoll, nicht alles!

Mein Problem: Normalerweise wird das Bild doch im gleichen Verhältnis zu den 2 Seiten gestreckt.

Nein. Es sei denn …

Was verstehst du unter „normalerweise“?

Qapla'

[klausfpga]

Hi,

ich habe wieder einmal ein Problem.

Dann beschreibe es uns doch bitte.

Für eine Physikseite möchte ich das Bild einer Feder nehmen (hab ich schon) und möchte das Bild mit einer beliebigen Javascript-Variable strecken

Meinst du sowas?

// bestimme Hoehe und Breite des Feder bildes (feder.jpg)
var federimg = new Image();
federimg.src = 'feder.jpg';
var feder_height = img.height;
var feder_width  = img.width;

function dehne_feder(dehnfaktor){
    var f  = document.getElementById('feder');
    f.setAttribute('style','height: '+(feder_height*dehnfaktor)+'px;'
                          +' width: '+feder_width+'px');
 }

Dein Imagetag sollte fuer den hier angegebenen Code so aussehen

<img id="feder" src="feder.jpg">

bye

K

[Gunnar Bittersmann]

@@klausfpga:

nuqneH

// bestimme Hoehe und Breite des Feder bildes (feder.jpg)

Warum sollte man das tun wollen? Die Maße des Bildes sind doch bekannt.

var federimg = new Image();
federimg.src = 'feder.jpg';

Und wenn schon, dann nicht ein neues Image-Objekt erstellen, sondern das schon vorhandene nutzen und dessen Maße ermittlen.

f.setAttribute('style','height: '+(feder_height*dehnfaktor)+'px;'
                          +' width: '+feder_width+'px');

Nein. Dynamische Stiländerungen von Elementen nicht per eigefügtem 'style'-Attribut, sondern per 'style'-Objekt:

f.style.height = (feder_height * dehnfaktor) + 'px';  
f.style.width = feder_width + 'px';

Bei Bildern kann man aber gleich die Werte der HTML-Attribute ändern:

f.height = feder_height * dehnfaktor;  
f.width = feder_width;

Aber da sich die Breite gar nicht ändern soll, ist die Breitenangabe völlig überflüssig.

Dein Imagetag sollte fuer den hier angegebenen Code so aussehen
<img id="feder" src="feder.jpg">

Nein, sollte er nicht. Das 'alt'-Attribut ist Pflicht.

Qapla'

[Gunnar Bittersmann]

@@Florian Richter:

nuqneH

ich habe wieder einmal ein Problem. Für eine Physikseite möchte ich das Bild einer Feder nehmen (hab ich schon)

Das Grafikformat der Wahl ist dann wohl SVG. Pixelgrafiken im Browser zu skalieren dürfte unschöne Ergebnisse bringen.

und möchte das Bild mit einer beliebigen Javascript-Variable strecken,

?? Wie kommet hier JavaScript ins Spiel? Möchtest du eine Schwingung animiert darstellen?

d.h. es soll länger werden, während die Breite gleich bleiben soll.

Wo ist das Problem, @width und @height in HTML anzugeben? Oder @height mit JavaScript zu ändern?

Qapla'