如何更改图像以保持纵横比？

Question

我有以下 HTML 代码：

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

和以下 Javascript 代码：

function ShowImage(id, row, column)
{
    var imagePath = '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 仅调用 ShowImage。

Back.png 为 200x200。我想用另一张图片更改 back.png 图像。另一个 (id + .png) 大于 200x200，所以我需要在 ShowImage 函数上调整它的大小。

但我不能这样做，因为我无法在这段代码中获取它的新宽度和高度：

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

我的目标是用另一个图像更改 back.png 图像，保持宽高比无线电。

还有另一个问题：首先我看到更大的图像，然后有时它会变成 200x200。我说有时是因为有时我会得到它的宽度或高度。

有什么建议吗？

Answer 1

最好的办法是首先将图像加载到内存中，然后在加载后获取其真实的高度和宽度，使用该信息（URL、高度和宽度）来确定适当的尺寸。但请注意，这并不是万无一失的，因为缓存可能会搞砸。

请注意，您可以概括以下内容以在函数本身中包含最大尺寸，但我认为它很容易适应：

// 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 示例

编辑

根据下面的评论交换了 attr 和 load 的位置。除此之外，我不会对优化过于疯狂，因为如果我们想要完美的东西，我们真正要做的就是预加载所有内容，获取其真实尺寸，并在每次更改原始图像时使用该信息。

Answer 2

你尝试过吗：

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