how to scale image with jquery

What would be the best and fastest way to scale/resize an image which is injected into PHP file which is called via AJAX with use of jQuery?

So I am trying to assure the image does not bypass the width of 600px and height of 410px but I do not wish for the image to be maxing out this dimensions and look weird, it has to be displayed as it would be, but just in smaller scale.

Also if there is a way开发者_Python百科 I can do this with a already existing Flash script that would be great, but I do not recall of any good ones which are as simple as one used by Google on there Picasaweb service.

Thanks in advance

Here is some jQuery that works:

var max_size = 200;
$("img").each(function(i) {
  if ($(this).height() > $(this).width()) {
    var h = max_size;
    var w = Math.ceil($(this).width() / $(this).height() * max_size);
  } else {
    var w = max_size;
    var h = Math.ceil($(this).height() / $(this).width() * max_size);
  }
  $(this).css({ height: h, width: w });
});

Check it out in action here: http://jsfiddle.net/QgDEk/

The original size of the image is huge but that script resizes it.

Here is the tutorial on it.

The naturalWidth and naturalHeight DOM properties of an HTMLImageElement return the source image's real dimensions.

if (imageElement.naturalWidth > imageElement.naturalHeight)
    imageElement.style.width = '600px';
else
    imageElement.style.height = '410px';

• Landscape image example: http://jsbin.com/ogisej/13
• Portrait image example: http://jsbin.com/ogisej/14
• Square image example: http://jsbin.com/ogisej/15

Notice how in the examples, the resizing code is put in a load handler for the image, such that it only resizes it when the dimension information is available. Otherwise naturalWidth and naturalHeight are zero, which causes problems. If you are disconcerted by watching images start off big, then shrinking, hide the image by default and then show it after resizing:

• Landscape image example: http://jsbin.com/ogisej/17
• Portrait image example: http://jsbin.com/ogisej/18
• Square image example: http://jsbin.com/ogisej/19

No need for jQuery, nor Flash ;)

Here is an example with support for max width and height.

// Set max width and height
var maxHeight = 50,
    maxWidth = 40;

// Create new image
myImage = new Image();
myImage.src = 'http://dummyimage.com/600x400/000/fff';

// On load of image
myImage.onload = function() {

    var width = myImage.width,
        height = myImage.height,
        ratio = Math.min(maxWidth / width, maxHeight / height);

    newWidth = parseInt(ratio * width);
    newHeight = parseInt(ratio * height);

    $('body').append('<p>Original: ' + width + ' x ' + height + '</p>');
    $('body').append('<p>Max: ' + maxWidth + ' x ' + maxHeight + '</p>');
    $('body').append('<p>Resized: ' + newWidth + ' x ' + newHeight + '</p>');

    // Add new image
    $('body').append($('<img>', {
        src: 'http://dummyimage.com/' + newWidth + 'x' + newHeight + '/000/fff',
        width: newWidth,
        height: newHeight,
        alt: "Test Image",
        title: "Test Image"
    }));
};