javascript - java脚本根据窗口大小展开div和bg图像

Question

对不起，第一个问题。我是通过反复试验来学习这一切的。无论如何，我无法弄清楚如何复制这个 1 脚本。

我想要做的是使用 javascript 或 somthing 根据窗口的大小在该 div 内扩展 div 和 bg 图像。有关我正在尝试做的示例，请查看42floors。

我的项目已格式化

/* header */

/* I want to expand dynamically */
<div>

/*Content area with title showing at bottom like example site, even when window is expanded. */
<div>

/* footer */

任何见解或方向都会非常有帮助。谢谢。

Answer 1

看看他们的源代码。他们正在使用以下内容：

#container {
  width: 100%;
  background: url(your-image.png);
  background-size: 100%;
}

请记住，background-sizeIE6-8 不支持。

Answer 2

a fairly simple programmatic approach would be to add an event listener to the window resize event and calculate the height/width and appropriate resize the image/div.

$(document).ready(function(){
    $(window).resize(function(){
        //change the size of your div using something like
        $(div).css("width", value);
        $(div).css("height", value);
    });
});

this uses Jquery by the way. http://code.jquery.com/jquery-1.9.1.min.js

Answer 3

http://johnpatrickgiven.com/jquery/background-resize/以获得全面支持，如上所示，如果您不提供有关 IE < 9的* * 信息，则可以选择 background-size