css如何使background-image自动适应窗口大小？

请问如何写html代码或css使background-image自动适应窗口大小？

举报该问题

推荐答案 2015-05-19

你好，如果只考虑高级浏览器，这个需求很好做，一句简单的css代码就可以搞定了：

html,
body {width: 100%;height: 100%;}
body {background-image: url(images/bg.png);background-size: cover;}

其中background-size的取值：

cover：保证背景不变形填满窗口，超出部分被裁剪

contain：保证整张背景图片在body内部，不足区域留白

二者都能保证背景随窗口大小变化而自适应。

另，如果是要考虑到低级浏览器，这个稍微麻烦点，不过可以给你提供解决方案

设置一个背景img标签，fixed定位，填满整个窗口

window.onresize的时候，动态计算img标签的尺寸，同时改变定位位置

希望能解决你的问题，如有疑问欢迎追问，望采纳~

追问

我用background-size: contain实现了图片自适应窗口大小，但是background-image的上下左右需要留白怎么写代码了呢？

追答

给你个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bgsize</title>
<style>
html,
body {
  width: 100%;
  height:100%;
}
.bg {
  position: fixed;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  z-index: -1;
  background: url(http://imgserv.jd-app.com/?size=70x70) no-repeat center center;
  background-size: contain;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>

在bg之外写你的正常内容就好了，然后，留白的大小你直接修改上面top、left、width、height的百分比控制就好了~~

温馨提示：答案为网友推荐，仅供参考

当前网址：http://55.wendadaohang.com/zd/GIGG4FLeFe4GQGQGeG.html

其他回答

第1个回答 2015-05-19

是要宽度自适应还是全屏自适应啊！？
1.宽度自适应：
   1）在背景图img外层加一层div，并设置width:100%;注意最外层的body也要设置width:100%;
<body style="width:100%">
    <div style="width: 100%">
        <div><img src="/images/img1.jpg" width="100%" height="auto"></div>
    </div>
</body>

2.全屏铺满
1）在背景图img外层加一层div，并设置width:100%;height: 100%;。注意最外层的body也要设置width:100%;如果是整张图片，如果比例和屏幕不一致时可能会有点变型。
<body style="width:100%">
    <div style="width: 100%; height: 100%">
        <div><img src="/images/img1.jpg" width="100%" height="100%"></div>
    </div>
</body>

希望对你有帮助！

追问

我不是要使div里的图片自适应，是要使背景图片自适应哦