How can I change an image with another keeping aspect ratio?

I have the following HTML code:

<img id="Card00" src="images/words/back.png" onclick="imageClicked(0,0);">

And the following Javascript code:

function ShowImage(id, row, column)
{
    var imagePat开发者_JAVA百科h = 'images/words/' + id + '.png';
    var imgId = '#Card' + row + '' + column;

    $(imgId).attr('src', imagePath);
    var width = $(imgId).attr('width');
    var height = $(imgId).attr('height');

    if (width > height)
        $(imgId).attr('width', 200);
    else
        $(imgId).attr('height', 200);
}

imageClicked only calls ShowImage.

Back.png is 200x200. I want to change back.png image with another one. That another one (id + .png), is bigger than 200x200, so I need to resize it on ShowImage function.

But I can't do that, because I can't get its new width and height in this piece of code:

var width = $(imgId).attr('width');
var height = $(imgId).attr('height');

My goal is to change back.png image with another one, keeping aspect radio.

And there is another problem: first I see the bigger image, and then, sometimes, it gets 200x200. I said sometimes because sometimes I get its width or its height.

Any advice?

The best thing to do is just load the image into memory first, then once it loads get its real height and width, use that info -- URL, height and width -- to determine the appropriate dimensions. Note that this isn't foolproof, though, as caching can mess it up.

Note that you can generalize the below to include maximum dimensions in the function itself, but I think it's pretty easily adaptable:

// Example: replaceImage($("img#someID"), "http://example.com/logo.png");

var MAX_HEIGHT = 80;
var MAX_WIDTH = 80;

function keepAspectRatio(temp, $target, url) {
  // Get height and width once loaded
  var realHeight = temp.height;
  var realWidth = temp.width;

  // Get how much to divide by (1 if image fits in dimensions)
  // Get rid of ", 1" if you just want everything to be either
  // MAX_HEIGHT tall or MAX_WIDTH wide
  var factor = Math.max(realHeight/MAX_HEIGHT, realWidth/MAX_WIDTH, 1);
  realHeight /= factor;
  realWidth /= factor;

  // Set the target image's source, height and width
  $target.attr("src", url).css({height: realHeight, width: realWidth});
}

function replaceImage($target, url) {
  $("<img>").load(function() {
    keepAspectRatio(this, $target, url);
  }).attr("src", url);
}

jsFiddle Example

EDIT

Swapped places of attr and load per the comment below. I'm not going to go too crazy with optimization beyond that, as what we'd really do if we wanted things perfect would be to preload everything, get its real dimensions, and use that information each time we change the original image.

Did you try:

var width = $(imgId).clientWidth;
var height = $(imgId).clientHeight;