Background-size and background-position on an img tag

Question

I have an image that can be cropped used a JS lib. The lib returns x,y, width and height of the selection.

Initially, the logic was just several uploaded image (in <img>) sit side by side with little edit buttons over them that open a pop-up with the cropping logic. However, now the specification is to have the preview of what was cropped.

The question - is there a way to do it without switching all <img> to <div>s that will have all images as background and can be moved and scaled to show the cropped part? Is there a counterpart to such styling or another possible workaround in which I can keep the <img> tags?

Answer 1

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

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

Answer 2

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)