“调整大小”事件没有按预期调整图像大小。
“调整大小”事件没有按预期调整图像大小。
提问于 2013-11-27 23:42:17
我有一个图像，我将其高度和宽度设置为90%的屏幕大小，而我正在加载HTML页面。现在，当我调整浏览器的大小时，我想调整图像大小。下面是我的密码-
<!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>问题是，当我还原页面时，图像大小正按预期进行更改。但是，当我最大化页面时，图像高度保持与还原页面时相同的大小。在每次还原时，+最大化图像大小越来越小。令人惊讶的是，它只发生在高度，而不是宽度。
我做错了什么吗？我怎么才能解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-27 23:54:04
<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;现场演示(点击)。
内联js (onlick等，在html中)不是很好的实践--它永远不应该被使用。您的代码将更容易调试，如果您像我上面所做的那样把事情分解了。获取高度，然后应用高度，以便检查正在计算的高度。这将向您表明，clientHeight没有给出您所期望的价值。此外，您的元素可以缓存在变量中，这样您就不必一直键入那个长函数才能找到它，并通过每次搜索dom来损害性能。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20255267
复制相关文章
相似问题
腾讯云开发者
