调整大小事件未按预期调整图像大小答案

【问题标题】：resize event is not resizing image size as expected调整大小事件未按预期调整图像大小
【发布时间】：2013-12-13 20:24:30
【问题描述】：

我有一个图像，我在加载 HTML 页面时将其高度和宽度设置为屏幕大小的 90%。现在我想在调整浏览器大小时调整图像大小。下面是我的代码-

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function setImageSize() {
     document.getElementById('rockImg').height=(screen.height)*.9;
     document.getElementById('rockImg').width=(screen.width)*.9;
  }
function resizeImageSize() {
     document.getElementById('rockImg').height=(document.body.clientHeight)*.9;
     document.getElementById('rockImg').width=(document.body.clientWidth)*.9;
  }
</script>
</head>
<body onload="setImageSize();" onresize="resizeImageSize();">
<img src="iRock_normal.png" id="rockImg" alt="iRock" onclick="greetByName();" />
</body>
</html>

问题是，当我恢复页面时，图像大小会按预期更改。但是，当我最大化页面时，图像高度的大小与我恢复页面时的大小相同。并且每次还原下来+最大化图像大小越来越小。令人惊讶的是，它只发生在高度上，而不是宽度上。

我做错了吗？我该如何解决这个问题？

【问题讨论】：

我正在使用 chrome，它确实会按预期调整大小。
这对我来说真的不起作用，但这似乎是由于一些错误的计算 -> jsfiddle.net/2VgHm
我也在使用 chrome。它不适合我。也在IE10中测试过。同样的问题。请恢复下来并 mazimize 几次。
是的，Adeneo，这就是问题所在。有没有办法解决这个问题？
也许可以这样尝试 -> jsfiddle.net/2VgHm/2

标签： javascript html resize

【解决方案1】：

<img src="iRock_normal.png" id="rockImg" alt="iRock"/>

javascript：

var rockImg = document.getElementById('rockImg');

function resize() {
  var height = window.innerHeight*.9;
  var width = window.innerWidth*.9;
  rockImg.height= height;
  rockImg.width= width;
}

window.onload = resize;
window.onresize = resize;

Live demo here (click).

内联 js（onlick 等，在您的 html 中）不是好的做法 - 永远不应该使用它。如果您像我上面所做的那样分解，您的代码将更容易调试。获取高度，然后应用高度，以便您可以检查正在计算的高度。那会告诉你clientHeight 没有给你你期望的价值。此外，您的元素可以缓存在一个变量中，这样您就不必一直键入那个长函数来查找它，并且每次都搜索 dom 会损害性能。

【讨论】：