Question

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.

Answer 1

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.