ContentEditable изменение размера изображения в хром, что является лучшим решением?

Я пытаюсь интегрировать изменение размера изображения с помощью contentEditable в Chrome. Я знаю, что есть проблемы с webkit о нормальной работе этой функции, поэтому мне было интересно, какой лучший альтернативный метод для интеграции изменения размера изображения, если пользователь использует Google Chrome (jQuery-плагины? Методы Javascript?).

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

Ответ 1

Ваши варианты:

Используйте библиотеку. Они определенно существуют: например, YUI имеет модуль изменения размера изображения. Я никогда не использовал его, но демонстрация работает во всех браузерах на рабочем столе, которые я пробовал.
Создайте свой собственный: добавьте элементы перетаскиваемого элемента для ручек изменения размера. Я сделал это раньше, и это не слишком сложно, если вы знаете, что делаете.

Ответ 2

@Tim-Down Answer, вероятно, лучшее решение. Но я хочу выбросить туда, что вы можете изменить размер изображений только с помощью CSS, если вы не хотите делать с ним ничего более:

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>