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

Question

我有一个调整大小功能，可以使主要 div 以一致的比例调整大小。我最初根据 window 宽度调整大小，效果很好（函数中的第一个条件）。然后我添加了第二个条件，以便如果 window 太短，它会根据高度调整大小。此函数与 onload 一起正常工作。

onresize 在 window 变窄或变宽时都适用于宽度，但高度条件仅在 window 变短时有效。 . .如果 window 然后被拖得更高，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()">

Answer 1

使用背景图片实现此目标

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

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

使用此逻辑，您几乎可以根据 window 大小任意放大每个维度，然后让 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/no 背景图片时

这更适用于偶然发现此答案并寻找与上述相同结果但使用普通 div（可能带有背景颜色或其他东西）并且没有来自 [=34 的帮助的任何人=]: 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% 的方法，所以如果有人对 window 宽度问题有解决方案，我很想听听。

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

resize function only works in one dimension

javascript

onload

onresize

使用背景图片实现此目标

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