Divs 根据窗口宽度和高度自动调整大小答案

【问题标题】：Divs auto resize on window width and heightDivs 根据窗口宽度和高度自动调整大小
【发布时间】：2012-06-19 18:54:22
【问题描述】：

我正在做一个项目，我正在尝试创建以下内容：

我希望在彼此下方有三个或更多 div（带有内容和背景图片）。当您打开浏览器时，所有这些 div 都必须自动调整到浏览器大小（宽度和高度）。当您调整浏览器窗口的大小（不刷新）时，div 必须与它们一样大（因此它们不应该随着窗口调整大小）。缩小浏览器屏幕并刷新后，div 应调整为新的窗口大小。（应该有 1024 的最小宽度，所以 div 不能小于这个值）

在 div 中我要添加背景图片。（相片）。我的目标是将照片的大小精确地调整为 div 大小。所以高度必须随着照片/div的宽度缩放。

例如：如果浏览器窗口为 1024x768，则 div 和 photo 必须为 1024x768。当我调整浏览器大小时，div 保持 1024x768。当您将浏览器的大小调整为 1280x720 并刷新时，div 应该会自动调整为该大小。 div 的高度应始终与宽度成比例。

有人知道怎么做吗？我在其他任何地方都找不到它。

【问题讨论】：

标签： jquery html resize window

【解决方案1】：

http://jsfiddle.net/MQkmk/1/

$(function(){               // when the page is loaded ...
    var $f = $('#fixy');    // .. make current size permanent. 
    $f.css({
        width:  $f.width(),
        height: $f.height()
    });
});

【讨论】：

呸，太容易了。破解只用了3个月。下次试试ROT26！我听说双重加密使其安全性提高了一倍。

【解决方案2】：

<html><head>
<script src="js.js"></script>
<title></title>
<style>
#box {
      background: url("DSC_2598.jpg");
background-size:contain;
      position: absolute;
    }
</style>
</head>

<body>
<div id="box"></div>

<script>
        $(document).ready(function(){   
    var x=$(window).width();
        var y=$(window).height();

    if (x>1024) {var a=x/2;} else {var a=1024};
    if (y>768) {var b=y/2;} else {var b=768};
        $("#ww").html("width="+x +"<br>");
    $("#wh").text("height="+y);
        $("#box").css("height",b);
        $("#box").css("width",a); }); 

</script>
</head>
<body>
<br>
</body>
</html>

这可能会满足您的需求，前提是您拥有适合该比例 (1024x768) 的图像。

【讨论】：