ContentEditable image resize in chrome, what is the best solution?

Question

I'm trying to integrate image resizing using contentEditable on Chrome. I know there are problems with webkit about the normal operation of this feature, so I was wondering what is the best alternative method for the integration of image resizing in case a user uses Google Chrome (jQuery plugins? Javascript methods?).

<div contenteditable>
  <img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width=200 />
</div>

Here is how it works out-of-the-box with Firefox:

Answer 1

@Tim-Down Answer is probably the better solution. But I want to throw out there, that you can resize images with just CSS, if you don't want to do anything further with it:

http://codepen.io/anon/pen/JEEKqO

    resize: both;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg);

body {
  background-color: #1D1F1F;
}

section { 
  display: table;
  margin: 0 auto;
}

div {
  resize: both;
  background-color: white;
  overflow: scroll;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg');
  background-size: cover;
  background-repeat: no-repeat;
} 

<section>
  <button>both</button>
  <button>horizontal</button>
  <button>vertical</button>
  <button>none</button>
<div class="resize"></div>
</section>