0

I'd like to scale and crop an image to a set width and height while maintaining the aspect ratio in browser since the image is being pulled from elsewhere (a facebook image object which has fixed sizes).

Is there a 'standard' way to do this in browsers using CSS and Javascript? I can change the image height/width and use top/left to get something working.

Is resizing the image object the way to enact the change, and is there a standard way to crop and resize the image (how to calculate the cropping)?

I was hoping jQuery would have an answer.

Igy
  • 43,710
  • 8
  • 89
  • 115
ccook
  • 5,869
  • 6
  • 56
  • 81

3 Answers3

1

Check out this post: jQuery resize to aspect ratio

From what I know you have to do it manually. Get the aspect ratio by getting the current size and set the new height and calculate new width based on the aspect ratio.

Community
  • 1
  • 1
Eric Kim
  • 256
  • 4
  • 9
  • I'd like to set the width and height during the resize - sorry, I should have been more clear in the question (I updated it). – ccook Nov 25 '12 at 21:22
  • `$(window).resize(function(){ //code in here. });` Call the function on resize. You can get the width of the window and make it percentage, or make it the window width - margins and sidebars (if you have). – Eric Kim Nov 25 '12 at 21:26
  • @TheWinow is that intended for scaling the image within a resizing window? I'm shooting for resizing an arbitrary image into, say, a 75x75 container cleanly. – ccook Nov 25 '12 at 22:29
  • 1
    Sorry, I'm not sure I understand. You want it in a container 75x75 static sized? Is the container resizing? You can get the container's width and height `$(#container).height()` or `.width()` and set that as the height or width of your image (whichever is larger). Then of course use what they do in that post to get the aspect ratio and set the other value. – Eric Kim Nov 26 '12 at 01:22
  • 1
    Correct, a static sized container, which may have any sized/aspect image as the src. In the post you referenced there is an answer at the bottom that seems to do all this correctly. +1 – ccook Nov 26 '12 at 15:41
0

You can resize an image with width/height as you say, and you can crop an image in CSS using clip http://www.w3.org/TR/CSS21/visufx.html#clipping

If that doesn't meet your requirements it is certainly possible to perform advanced processing on an image in JavaScript using canvas.

Jim Blackler
  • 22,946
  • 12
  • 85
  • 101
0

I found the following jQuery plugin on Google Code. It seems to work quite well, but I worry about its support/use. With just two revisions and 30 or so downloads.

To support no script I am setting the height and width attributes on the img tag. Then on ready I remove the two attributes from the tag and use the plugin to resize. The effect is the images are sized correctly on load, but may take a moment to correct the aspect ratio - instead of the images overflowing the design.

Handy jQuery plugin for uniform resizing & cropping.

Their self description

Resize & Crop

Handy jQuery plugin for client-side uniform resizing & cropping. Ideal for avatars and images with similar size (more different sizes—the bigger bandwidth overhead).

Ideal use You can use plugin for example to transform profile pictures of Facebook users (profile avatars). They are similar in size but not the same, but if you want to show them in a grid you probably want them to be same height (or/and width).

See example with cats to get better understanding what Resize & Crop can do for you.

ccook
  • 5,869
  • 6
  • 56
  • 81