Javascript 调整大小功能仅在一个维度中起作用_Javascript_Onload_Onresize

Javascript 调整大小功能仅在一个维度中起作用

javascript

Javascript 调整大小功能仅在一个维度中起作用,javascript,onload,onresize,Javascript,Onload,Onresize,我有一个resize函数，可以使主div的大小保持一致。我最初让它根据窗口宽度调整大小，这在函数的第一个条件下工作得很好。然后我添加了第二个条件，如果窗口太短，它会根据高度调整大小。此功能在onload时正常工作 onresize在窗口变窄或变宽时都适用于宽度，但高度条件仅在窗口变短时适用。如果窗口被拖得更高，onresize事件似乎没有触发，我必须手动重新加载页面，以便函数调整大小 <script> function contentResizeHeight() { va

我有一个resize函数，可以使主div的大小保持一致。我最初让它根据窗口宽度调整大小，这在函数的第一个条件下工作得很好。然后我添加了第二个条件，如果窗口太短，它会根据高度调整大小。此功能在onload时正常工作

onresize在窗口变窄或变宽时都适用于宽度，但高度条件仅在窗口变短时适用。如果窗口被拖得更高，onresize事件似乎没有触发，我必须手动重新加载页面，以便函数调整大小

<script>  
function contentResizeHeight() {
    var contentBG = document.getElementById("content");
    var windowHeight = window.innerHeight;
    var newHeight = Math.round(contentBG.offsetWidth * .6);

    if ( windowHeight > newHeight ){
        contentBG.style.height = newHeight + "px";
    }

    if ( windowHeight < newHeight ){
        var newerWidth = windowHeight * 1.666666666666666666;
        var newerHeight = Math.round(newerWidth * .6);

        contentBG.style.height = newerHeight + "px";
        contentBG.style.width = newerWidth + "px";
    }
};
</script>

我调用body标签中的函数

<body onload="contentResizeHeight()" onresize="contentResizeHeight()">

通过背景图像实现此目标如果您试图通过背景图像实现这一点，可以使用CSS背景大小：contain；。从Mozilla网站上的关键字：

此关键字指定背景图像应缩放为尽可能大，同时确保其尺寸小于或等于背景定位区域的相应尺寸

使用这种逻辑，您可以根据窗口大小将每个维度放大到您想要的大小，并让CSS完成其余的工作

function contentResizeHeight() {
    var contentBG = document.getElementById("content"),
        windowHeight = window.innerHeight,
        windowWidth = window.innerWidth;

        contentBG.style.height = windowHeight + "px";
        contentBG.style.width = windowWidth + "px";
}

看看它在起作用

使用普通div/无背景图像时这更适合那些偶然发现这个答案的人，他们正在寻找与上面相同的结果，但是使用一个简单的div，可能带有背景色或其他颜色，并且没有CSS的帮助：

这正是我设法使其工作95%的方法，因此，如果有人对窗口宽度问题有解决方案，我很乐意听到它。

什么是contentBG以及它的高度是如何定义的？contentBG是一个div，其高度由容器的宽度设置。也许这把小提琴显示了这个问题——将窗口的大小调整得越来越窄，越来越宽，高度也会发生变化。调整窗口的大小越短，窗口就越窄，但是如果将窗口拖得更高，窗口就不会改变。请显示相关的HTML和CSS。显示控制台中的值，请仔细研究，您会发现逻辑中有错误。谢谢，我已经记录了所有变量。虽然它们说明了最终结果，但它们并不能真正帮助我找到逻辑错误。一次只记录一种情况，这告诉我，调整窗口大小会在两个方向上缩小更宽的日志。记录第二个条件-在窗口变短时，仅记录较短或较高的大小，即，随着窗口变高，此条件不再满足。这要好得多，至少它有点流动性。这种解决方案有一些边缘情况，比如先缩短窗口，然后加宽窗口，在这种情况下，大小会跳跃很多，但距离很近。我不希望人们疯狂地调整他们的窗口大小。我会继续看这个的。仅供参考真正的解决方案是一个具有背景图像的div，背景大小：封面；这是为了使图像不失真。这里有一个更具代表性的测试，在开始拖动窗口大小之前，卸载的大小不能正确调整。你有时会看到一些紧张。哦，好吧，处理背景图像要容易得多。我将添加一个更新。你可能也想在最初的问题中澄清这点。@jim我已经更新了我的帖子，以说明背景图像的情况。让我知道这是否是你想要的。是的。我使用的是背景尺寸：封面，对你答案的修改确实有效。我不知道如何将你的修订标记为正确答案。

function contentResizeHeight() {
    var contentBG = document.getElementById("content"),
        windowHeight = window.innerHeight,
        windowWidth = window.innerWidth;

        contentBG.style.height = windowHeight + "px";
        contentBG.style.width = windowWidth + "px";
}

function contentResizeHeight() {
    var contentBG = document.getElementById("content"),
        windowHeight = window.innerHeight,
        windowWidth = window.innerWidth,
        contentHeight = contentBG.offsetHeight,
        contentWidth = contentBG.offsetWidth,
        newHeight = null,
        newWidth = null;

    if ( windowHeight > contentHeight ){
        // 40 is the buffer zone for increasing the windows width quickly
        if( contentWidth < windowWidth - 40 ){
            newWidth = contentHeight * 1.666666666666666666;

            if( newWidth >= windowWidth - 10 ){
                newHeight = Math.round(newWidth * .6);
            } else {
                newHeight = windowHeight;
            }

        } else {
            newHeight = Math.round(contentWidth * .6);
            newWidth = windowWidth - 4;
        }

    } else if ( windowHeight < contentHeight ){
        newHeight = windowHeight;
        newWidth = newHeight * 1.666666666666666666;
    }

    contentBG.style.height = newHeight + "px";
    contentBG.style.width = newWidth + "px";

}