Question

所以我用jquery检测我的宽度和高度没有问题。现在，这可能是一个简单的问题，但是，我如何给出通常为3000x2000的图像的宽度和高度。

我正在使用css加载图像作为背景

var theDiv = $("#container");
var totalWidth = theDiv.width();

$(theDiv "img").css("width" totalWidth);

不适合我。

Answer 1

我在css中做了一个：http://jsfiddle.net/jklm313/EdyUE/11/
我做的是，我使用'*'通用选择器给页面中的每个元素相对定位，然后创建一个具有绝对定位，100％宽度和高度的类（.bg）。负z-index，因此它将显示在内容之下。
我用一个小图片向你展示它如何伸展以适应窗户。

Answer 2

这是我制作的js插件，可以调整图像大小 - http://drewdahlman.com/labs/javascript/background_js

GIT项目 - https://github.com/DrewDahlman/background.js

将会击中所有浏览器。只需将您的图像包装在带有背景ID的div中，并将脚本包含在$（document）.ready函数调用background.init（）中，然后就可以了。

Answer 3

如果您使用CSS将图像加载为背景，则更改DIV的大小不会影响图像的大小。你有两个选择：

使用绝对定位，z-index：0并将top，left，right和bottom属性设置为零，将图像放置在body标签内。
使用CSS3属性 background-size 。例如，body { background-image:url(your_image.png); background-size:cover; }会将图像缩放到最小尺寸，以使其宽度和高度都适合内容区域。您可以在http://www.w3schools.com/cssref/css3_pr_background-size.asp

我希望这有帮助！

根据浏览器窗口调整背景图像的大小

3 个答案: