[JS] Contenteditable = true

[Fluffy_Unicorn]

Hallo Leute,

Ich habe ein Div-Element, wo ich das Attribut contenteditable auf true gesetzt habe.
So habe ich auf meiner Seite einen kleinen, simplen Editor gebaut.

Nun kann ich natürlich auch Bilder(gallerien) einfügen und diese beliebig skalieren. Das Problem dabei ist, dass sich das Bild strecken lässt, und dies möchte ich verhindern.
Ich möchte also eine Funktion bauen, die die Bildverhältnisse bei einer Skalierung beibehält. Dabei fehlt mir aber der komplette Ansatz dafür.

Vielleicht hat jemand von euch schon einmal so etwas gemacht oder hat einen Lösungsvorschlag dafür?

Solltet ihr Codeausschnitte benötigen, stelle ich diese gerne zur Verfügung. Wird aber wohl nicht nötig sein.

Gruss,
Fluffy_Unicorn



Edit: Falscher Bereich, danke fürs verschieben

 

[theSplit]

Hallo!

Ich würde es spontan lösen:
Gehen wir mal von einem Bild in 1024 x 768 Pixeln aus.

Breite durch Höhe teilen:
1024/768 = 1.333

Höhe durch Breite teilen:
768/1024 = 0.75

Nun diese Proportionen in je einer Variable speichern.

Jetzt beim ersten MouseDown(nicht "clicked") eine Variable setzen "mouseIsPressed = true".
Mit MouseUp Listener dann die Variable "mouseIsPressed = false" setzen.

Dazu einen "MouseMove" Event Listener setzen der überwacht ob "mouseIsPressed" wahr ist und dann wie folgt an dem Bild operierten.

Wie das Bild nun skalieren, vielleicht so:
Sagen wir die Maus wird auf 110 x 190 bewegt, jetzt können wir die Bildproportionen so berechnen:

Wenn die Höhe bevorzugt wird:
Neue Breite: 190 * 1.333 = Math.round(253.27) = 253;
Höhe = 190;

Wenn die Breite bevorzugt wird (liegt näher):
Breite = 110;
Neue Höhe: 110 * 0.75 = Math.round(82.5) = 83;


Was natürlich nicht ideal ist, die Skalierungen wird nicht dem Maus-Cursor folgen.

 

[Fluffy_Unicorn]

Danke für deine Antwort, werde dies bei Gelegenheit ausprobieren. Klingt aber schonmal plausibel für mich.

Wäre schon gut wenn die Skalierung dem Cursor folgt, aber dies werde ich ausprobieren.

 

[Jester]

Ein kleiner Tipp dazu: sobald das Resizen losgeht, solltest Du eventuell vorhandene Inline-Styles (height, width) der Bilder per JS entfernen

J.