Scaling / Cropping images with jQuery & CSS

Question

I have an interesting problem that I've yet to find a proper solution to. You can view the fiddle here: http://jsfiddle.net/DgN8C/3/. Basically, I have an image of a certain size. That image needs to be scaled down so that the user chosen center point (indicated by the red dot visually and data-center-* attributes [these are percentages based on the image width / height]) is in the middle of the containing div (x,y of 50,50 in the example). So, in an ideal world, given the following image:

<img src="image-source" data-center-x="59.125" data-center-y="37.4296" />

The ideal positioning within a 100 x 100 div would have a height of 138px with a left margin of -72px. This would ensure that the red dot in the center of the image (again, see the fiddle) is aligned to the center of the containing div.

Any help to get me going in the right direction would be greatly appreciated.

This is almost exactly what I'm trying to accomplish: http://jsfiddle.net/W4seR/10/. If the red dot here is the red dot on my image and the image fills the space (centered on the red dot), that'd be perfect. — sdover102, Oct 24 '12 at 18:21

score 3 · Accepted Answer · edited May 23 '17 at 11:55

I think I've got it. You may want to check that the images are to scale. http://jsfiddle.net/DgN8C/7/

Basically, I scale, then set the margins. The limiting factor, or the factor that tells us whether or not we need to scale the image, will be the smaller of the two sides. So if the dot is at 80%, we need the pixel width between the dot and the right side (image_width * 20%) to be able to fit in our enclosing div object (obj_width / 2). Note the if statement.

So if our image does not fit in the object, we need to scale it bigger. And somehow I did that. It hurts to think about.

// First, we need to scale image so that it will fit within the dimensions 
// of the object. The limiting factor is shorter side of the pixel
limit = Math.min(center_x, 100-center_x) / 100.0;

// Check if image needs to be scaled
if ((obj_width/2) > (limit*img.width())) {
    // Image must be scaled
    chunk = limit * 2; // Section we need from image
    // image_width * chunk = obj_width
    img.width( Math.ceil( obj_width / chunk ) );
}

Then I do the same thing for height. It looks like jQuery's width() and height() functions keep everything to scale. May require further testing.

Then I change the margins.

img.css('margin-left', -1 * (((center_x/100.0)*img.width()) - (obj_width/2)));
img.css('margin-top', -1 * (((center_y/100.0)*img.height()) - (obj_height/2)));

EDIT Ok, the first attempt was not preserving aspect ratio. Should be fixed now. http://jsfiddle.net/DgN8C/9/ Logic is basically the same as below, except that I intelligently chose either width or height to scale. Setting only one will preserve aspect ratio.

EDIT One more. http://jsfiddle.net/DgN8C/13/ This scales both larger and smaller to fit the containing div object. Previous solution was only scaling larger if necessary.

This was a helpful post: jQuery resize to aspect ratio

Hey man. This is so close...the only thing this doesn't do is scale the image width / height (if you inspect the element, the image size remains the same) — sdover102, Oct 25 '12 at 12:07

Scaling / Cropping images with jQuery & CSS

1 Answers1