javascript - .clientHeight 仅在调整浏览器大小时缩小

Question

console.log(document.body.clientHeight);

主要问题是我正在尝试调整图像大小以适应浏览器更改为的任何大小。因此，使用 .clientHeight 属性我可以检测大小，然后使用此逻辑作为函数的一部分更改图像，该函数在触发“onresize”时调用

 var temp = parseInt((document.body.clientHeight-100)*0.90);

当从大尺寸变为较小尺寸时，代码按预期工作。然而，当您缩放浏览器窗口时，onresize even 被成功调用，但 .clientHeight 给出的值保持不变，因此图像不会返回到更大的尺寸!

感谢任何帮助!这是调整大小的完整函数，不用担心变量不会保留名称“temp”。

function resize(){
    //This returns the height in pixels of just the inside content pane of the browser (ie not including tool bars etc)
    console.log(document.body.clientHeight);
    //Here I MUST use the parse INT because there is no such thing as half a pixel and it will cause an error.
    var temp = parseInt((document.body.clientHeight-100)*0.90);
    //in order to prevent the browser from dropping the height mod we need to have "px" appended to the value being passed in
    temp= temp+"px";
    console.log(temp);
    document.getElementById("pet").style.height=temp;
}

Answer 1

使用 window.innerHeight 或 window.outerHeight 的建议实际上是对问题的修复。图像现在可以随着浏览器上下调整而正确缩放!

归功于 Mash