5

老歌但好歌，我知道。这个问题被问了很多次，但我还没有一个明确的答案。可缩放的背景图片，最好仅使用 CSS，如果必须，愿意使用 jQuery 来支持。我经常遇到的一个问题（即使用 CSS3 背景图像）是当图像高度小于浏览器窗口高度时图像下方的空白空间。（例如：http ://css-tricks.com/examples/ImageToBackgroundImage/ ）

这是我想要完成的：

  • 保持纵横比
  • 如果浏览器窗口小于图像大小，则剪辑图像高度和宽度
  • 图像以页面为中心，因此剪裁不会偏移页面的流动

以下是说明这些目标的一些示例（尽管我认为可以做得更好）：

谢谢你，谢谢你，谢谢你。

4

5 回答 5

1

被朋友推荐 Supersize - 这正是我想要的！使用核心功能而不是幻灯片版本。 http://www.buildinternet.com/project/supersized/

于 2011-02-22T22:04:29.550 回答
1

CSS：

#wallpaper {position:absolute; width:100%; height:100%; top:0; left:0; z-index:0}
#wallpaper img {height:100%; width:100%; margin:0 auto;}

html:

<div id="wallpaper"><img src="bg.jpg"></div>
于 2011-02-22T11:51:20.503 回答
1

你可以使用类似的东西：

selector {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

但它有浏览器不兼容。

.
替代解决方案将迫使您使用 HTML。

例子：

于 2011-02-22T00:47:29.840 回答
0

你看过https://github.com/weightshift/The-Personal-Page吗？

它使用了很好地完成这项工作的backstretch jQuery 插件。

于 2011-02-22T11:56:39.843 回答
0

干得好。使用 jQuery。IMG 标签设置为背景图像，使用position:absolute; z-indez:0;当您调整窗口大小时，图像将相应调整大小。跨浏览器兼容。

$(window).resize(function(){
    var bgwidth = $(window).width(),
    bgheight= $(window).height();
    $('img').attr({width:bgwidth, height:bgheight});
})

在http://jsfiddle.net/LBvjR/检查工作示例

于 2011-02-22T00:53:59.400 回答