ContentEditable图像在chrome中调整大小，最佳解决方案是什么？

Question

我正在尝试在Chrome上使用contentEditable整合图片大小调整。我知道webkit存在关于此功能正常运行的问题，所以我想知道在用户使用谷歌浏览器（jQuery插件？Javascript方法？）的情况下，整合图像大小调整的最佳替代方法是什么。

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

以下是它与Firefox开箱即用的方式：

Answer 1

您的选择是：

1. 使用库。它们肯定存在：例如，YUI有一个image resize module。我从未使用它，但该演示适用于我尝试过的所有桌面浏览器。

2. 编写自己的：为调整大小句柄添加一些可拖动的定位元素。我以前做过这个，如果你知道自己在做什么，那就太难了。

Answer 2

@Tim-Down答案可能是更好的解决方案。 但我想扔掉那里，如果你不想用它做任何事情，你可以用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);

＆＃13;

＆＃13;

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;
} 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;