Divs自动调整窗口宽度和高度-Java 学习之路

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

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

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

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

有谁知道如何制作这个？我无法在其他任何地方找到它 .

2 回答

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

回复于 2024-04-26T11:24:31+08:00

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

回复于 2024-04-26T11:24:31+08:00

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

2 回答

相关问题