ContentEditable image resize in chrome, what is the best solution? ContentEditable image resize in chrome, what is the best solution? google-chrome google-chrome

ContentEditable image resize in chrome, what is the best solution?


Your options are:

  1. Use a library. They definitely exist: YUI has an image resize module, for example. I've never used it but the demo works in all the desktop browsers I tried.

  2. Write your own: add some draggable positioned elements for the resize handles. I've done this before and it's not too hard if you know what you're doing.


@Tim-Down Answer is probably the better solution.But I want to throw out there, that you can resize images with just CSS, if you don't want to do anything further with it:

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>