Question

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

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

在div里面我想添加背景图片。（相片）。我的目标是将照片的大小调整为div大小。所以高度必须与照片/ div的宽度一致。

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

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

Answer 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()
    });
});

Answer 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），这可能会满足您的需求。

Divs自动调整窗口宽度和高度

2 个答案: