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 Example

修改

根据以下评论更改了attr和load的地点。我不会因为优化而过于疯狂，因为如果我们想要完美的东西我们真正做的就是预先加载所有内容，获得真实尺寸，并在每次更改原始图像时使用该信息。 / p>

Answer 2

你有没有尝试过：

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

如何使用另一个保持纵横比更改图像？

2 个答案: