Question

我有一个图像，我在加载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>

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

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

Answer 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).

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

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

1 个答案: