CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromefirefox
Jose Serodio
Jose Serodio

Reputation: 1439

How to simulate _moz_resizing in Chrome or Edge?

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

StackOverflow logo image resizing

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

code generated in Firefox

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.

Upvotes: 5

Views: 1141

Answers (1)

Anwar Hossain
Anwar Hossain

Reputation: 696

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

Upvotes: 2

Related Questions