How to simulate _moz_resizing in Chrome or Edge?

Question

So I want to image-resize client side, just like this, but not only in Firefox.

Notice that the element generated in Firefox, has the attribute _moz_resizing = "true".

The code is as simple as the following.

document.querySelector('p').contentEditable = true;

<p>
  <img src='http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png' alt='stackoverflow icon'>
</p>

Is there any way to do this for Chrome and Edge too?. I you are going to provide a solution in JavaScript, I would like better if it's vanilla.js than jQuery. Thank you in advance.

Answer 1

You can achieve this in chrome by wrapping the image with a div and adding this styles..

resize: both; 
overflow: auto; 

demo: https://jsfiddle.net/anwar3606/d184oqfz/

JQuery UI

JQuery UI provides very good resizability functions and is very easy to use. https://jqueryui.com/resizable/#default