How to simulate _moz_resizing in Chrome or Edge?

Question

So, I want to resize the client side of an image like this, but not only in Firefox.

Note 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 a way to do this for Chrome and Edge? . I am going to provide a solution in JavaScript, I would like it if it were vanilla.js than jQuery. Thank you in advance.

Answer 1

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

 resize: both; overflow: auto; 

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

JQuery UI

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