调整大小功能仅适用于一维答案

【问题标题】：resize function only works in one dimension调整大小功能仅适用于一维
【发布时间】：2015-01-29 18:36:26
【问题描述】：

我有一个调整大小的功能，可以使主 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>

#content div 被背景图片覆盖。所以想法是保持图像纵横比不变。

div#content{
    background-repeat:no-repeat;
    background-position:center 0px;
    background-size: cover;
    min-width:1024px;
    max-width:1600px;
    min-height:614px;
    max-height:960px;
    margin-right:auto;
    margin-left:auto;
}

我在body标签中调用函数

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

【问题讨论】：

什么是#contentBG，它的高度是如何定义的？
#contentBG 是一个 div，其高度由容器的宽度设置。也许这个小提琴显示了这个问题 - 调整窗口的大小越来越窄并且高度发生变化。将窗口调整得更短，它会变窄，但如果你把窗口拖得更高，它不会改变。 jsfiddle.net/n8b03xab
请出示相关的HTML和CSS。
Here's a fiddle在控制台显示值，请仔细研究，你会发现逻辑错误。
谢谢，我已经记录了所有变量。虽然它们说明了最终结果，但它们并没有真正帮助我找到逻辑错误。一次只登录一个条件向我展示的是，在两个方向上调整窗口（更窄更宽）日志的大小。记录第二个条件 - 调整大小（较短）仅在窗口变短时记录，即，随着窗口变高，不再满足此条件。

标签： javascript onload onresize

【解决方案1】：

使用背景图片实现这一目标

如果您尝试使用背景图片来实现此目的，您可以使用 CSS background-size: contain; 的帮助。来自 Mozilla 网站上的关键字contain：

该关键字指定背景图片在保证两个尺寸都小于或等于背景定位区域对应尺寸的情况下，尽可能的放大。

使用此逻辑，您几乎可以根据窗口大小随意放大每个维度，并让 CSS 完成其余工作。

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

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

JSFiddle here 看看它的实际效果。

使用普通 div/无背景图片时

这更适合任何偶然发现此答案并寻找与上述相同结果的人，但使用普通的div（可能带有背景颜色或其他东西）并且没有来自 CSS 的帮助：JSFiddle

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";

}

这就是我设法让它工作 95% 的方法，所以如果有人有解决窗口宽度问题的方法，我很想听听。

【讨论】：

这样好多了，至少有点流畅。这种解决方案有一些边缘情况，例如首先缩短窗口，然后加宽窗口，其中尺寸跳跃很多，但它很接近。我不希望人们像疯了一样调整他们的窗口大小。我会继续看这个。仅供参考，真正的解决方案是一个带有背景图像的 div，背景尺寸：封面；这样图像才不会失真。
这是一个更具代表性的测试，rdiv.com/jsTest 在您开始拖动窗口大小之前，卸载大小不正确。而且你有时会看到一些跳动。
哦，好吧，处理背景图像要容易得多。我会添加一个更新。您可能也想在最初的问题中澄清这一点。
@jim 我已经更新了我的帖子以说明背景图像的情况。让我知道这是否是您想要尝试的更多内容。
是的。我正在使用 background-size:cover 并且对您的答案的修改确实有效。我不知道如何将您的修订标记为正确答案。