1

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

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

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

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

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

4

2 回答 2

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()
    });
});
于 2012-06-17T18:08:37.133 回答
0 
<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) 的图像。

于 2013-11-12T11:58:43.193 回答