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

Question

我正在尝试在 Chrome 上使用 contentEditable 集成图像大小调整。我知道 webkit 关于此功能的正常操作存在问题，所以我想知道如果用户使用 Google Chrome（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);

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>