ContentEditable ridimensiona l'immagine in chrome, qual è la soluzione migliore?

Question

Sto cercando di integrare il ridimensionamento delle immagini utilizzando contentEditable su Chrome. So che ci sono problemi con il webkit sul normale funzionamento di questa funzione, quindi mi chiedevo quale sia il miglior metodo alternativo per l'integrazione del ridimensionamento delle immagini nel caso in cui un utente utilizzi Google Chrome (jQuery plugin? Metodi Javascript?).

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

Ecco come funziona out-of-the-box con Firefox:

Answer 1

Le opzioni disponibili sono:

1. Utilizzare un biblioteca. Esistono sicuramente: YUI ha un image resize module, per esempio. Non l'ho mai usato ma la demo funziona su tutti i browser desktop che ho provato.

2. Scrivi il tuo: aggiungi alcuni elementi posizionabili trascinabili per le maniglie di ridimensionamento. L'ho già fatto e non è troppo difficile se sai cosa stai facendo.

Answer 2

@ Tim-Down La risposta è probabilmente la soluzione migliore. ma voglio buttare là fuori, che è possibile ridimensionare le immagini con un solo CSS, se non si vuole fare nulla di più con esso:

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>