Lock aspect ratio when image grows larger than editor

[mkamalkayani]

Is it possible to lock the aspect ratio of the image?

[xeger]

The default ResizeAction should preserve the image's original aspect ratio. Is that broken? Or did you need a different aspect ratio that is not the original?

If you need to change the aspect ratio handling during user edits you can always create a KamalResizeAction extends ResizeAction (and also override ImageSpec).

If you need to force an aspect ratio for some image, one option is to initialize the editor with an <img/> tag that already has width and height. (Or you can initialize with a Delta JSON that includes width and height in the attributes of the image op -- same idea as HTML tag attributes, different format.) The editor should preserve the aspect ratio you initially set even if it is different from the image's natural ratio.

[mkamalkayani]

@xeger Thank you for your answer.

No, it's not broken. The aspect ratio is only not preserved when the image is stretched beyond the editor's boundary. I was expecting it to be preserved at all cases.

[xeger]

OIC ... I'm not sure how to fix that, actually! I would need to play with it a bit and understand what the browser is doing to constrain the aspect ratio, when it grows outside the boundary.

[xeger]

@mkamalkayani it seems that the browser's layout engine is constraining the width of the image. Notice that the HTML attribute is set to the correct width (should be ~1500px wide because I dragged the mouse very far right) -- but somehow the image is being constrained by its parent <p> or grandparent <div.ql-editor> so its calculated width is only ~500px.

My CSS skills are poor, so I'm not 100% sure how to fix this. I tried adding overflow: auto to the p and the div; no difference. (Also it would be hard to fix with CSS, since Quill controls the CSS of elements and of the editor.)

I notice that if I make the image too big, then shrink it, the aspect ratio is distorted. That is annoying & is probably a bug I could fix. Is that the bug you were originally complaining about?

[mbwgh]

This is easily encountered when you drag the upper-left resize handle to the left, increasing the image to sizes larger than the editor, or by resizing the editor itself to take on small dimensions.

A somewhat orthogonal feature may incidentally address this however: Being able to restore the original image size.

While it would be great if image distortion would be prevented in the first place, restoring the original image dimensions would be a nice-to-have on its own and could be implemented by "forgetting" the height/width properties in the Delta, no?

[xeger]

Yup; a command could be added to forget the delta's height and width.

To prevent distortion, the trick would be for the image-resizer to remember the original aspect ratio on click, and during the drag events, stop resizing if it would result in the ratio becoming distorted.

It's easy in principle to do, and at some point I will get around to it (famous last words).

[FairyWorld]

Yup; a command could be added to forget the delta's height and width.

To prevent distortion, the trick would be for the image-resizer to remember the original aspect ratio on click, and during the drag events, stop resizing if it would result in the ratio becoming distorted.

It's easy in principle to do, and at some point I will get around to it (famous last words).

I have also encountered this issue, and I hope to reach the maximum width or height when zooming in, instead of changing the aspect ratio