getComputedStyle（）height和width属性返回纯CSS而不是CSSStyleDeclaration对象中的值

Question

我正在使用window.getComputedStyle(img,null)（其中img是我的图像）在JavaScript中使用CSS样式化的图像的宽度和高度。

正在处理的图像在Soy模板中声明如下：

<img class="diffImg" id="diff-{$key}" style="display:block; margin-left: auto; width: 80%; height:auto; margin-right: auto; padding: 10px;" src="my-source">

页面上有几张图像，以标签视图显示。每个标签的定义如下：

<li class="menu-item">
 <a id="{$key}" href="#tab-{$key}" onclick="changeWheelzoom(this)">{$diffImage[$key].name}</a>
</li>

onclick函数中用于处理图像的JavaScript代码：

var computedStyle = window.getComputedStyle(img, null);
width = parseInt(computedStyle.width, 10);
height = parseInt(computedStyle.height, 10);
console.log(computedStyle);
console.log(computedStyle.width.valueOf() + ' ' + computedStyle.height.valueOf());

在这里我遇到了路障。运行getComputedStyle后，我得到一个CSSStyleDeclaration对象，该对象包含以像素为单位的图像的宽度和高度的值，可以在控制台中看到它。但是，访问computedStyle.width和computedStyle.height属性将返回CSS中指定的预处理值（80%和auto），然后返回parseInt无法提供准确的信息。

以下内容记录在控制台中：

CSSStyleDeclaration{ (second console.log)
...
height: "469.031px"
...
width: "740.797px"
...
}

80% auto (second console.log)

为什么控制台输出与我从程序中获得的输出不同，我该如何解决呢？