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>

這裏是它是如何工作外的開箱即用的火狐：

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>