1

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

1 回答 1

0

Achieving this goal with a background image

If you're trying to achieve this with a background image, you can use the help of the CSS background-size: contain;. From Mozilla's site on the keyword 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.

Using this logic you can pretty much just scale up each dimension as much as you want based on the window size, and let CSS do the rest of the work.

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 to see it in action.

When working with a plain div/no background image

This is more for anyone who happens to stumble across this answer looking for the same result as above, but with a plain div (maybe with a background color or something) and no help from 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";

}

This is just how I managed to get it working 95%, so if someone has a solution to the window width issue, I'd love to hear it.

于 2015-01-29T21:59:40.957 回答