Background-size and background-position on an img tag

If you don't care about IE you can use object-fit and object-position:

img {
   object-fit: cover;
   object-position: center top;
}

The best way to achieve this is by using any html element in combination with the css background attribute. Within that attribute you can define margins as sizes to position and resize the background image. In your case that element would have the width and the height given by your crop library. The position of the background image would be x and y (also from the library), but inverted.

It does not matter which element you use, it can be any (See w3.org/TR/CSS2/colors.html), included an img tag as shown in the following example:

<img border="0" style="display:block; width:120px; height:120px; background-color:red; padding:9px; background:url(http://www2.cnrs.fr/sites/communique/image/mona_unvarnish_web_image.jpg) no-repeat; background-position:-100px -40px;" />

Note that if you use the image tag you have to remove the src attribute (e.g. by JavaScript). Otherwise the background image will not be visible.

Nevertheless I would recommend you to use a JavaScript Library / Plugin instead of writing it something by your own. There are a bunch of solutions:

• JCrop (jQuery Plugin)
• ImageAreaSelect (jQuery Plugin
• Uvumitools Crop (Mootools Plugin)
• JS Cropper UI (Based on scriptacolous and prototype)