图片做背景撑开div

需求点：

设计师给了一张超大背景图，需要做一个不知道大小广告位，要求就是要把图片撑满整个页面，而且还得保证自适应。

解决方案一 （亲测有效）

HTML代码：

<div class="wrap"></div>

CSS代码：

.wrap{
	position: relative;
	padding-bottom: 35%; 
	background-image: url(/static/img/down-bg.0142ed6.png);
	background-repeat: no-repeat;
	background-size: 100%;
	margin: 0 auto;
}

其中padding-bottom的值为设计图的宽高比

解决方案二

HTML代码：

<div class="wrap"></div>

CSS代码：

/* 先填充div */
.wrap {
	background-size: 100% auto; 
	background-repeat: no-repeat; 
	background-image: url(../images/aaa.png); 
}

.wrap:before {
	content: ""; 
	display: block; 
	padding-top: 100%; /* 代表1:1，如果是想要5:1就是20%，根据图片大小比例，那就自己算一下吧*/ 
}

这块实际上做的就是用before占用一块位置，把相应的高度撑起来～
然后里面就可以放任何东西了，当然，里面的东西要保持

position: absolute; 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 
width:100%; 
height:100%; 

同时，上一层的position要是relative的，这样就可以保证，里面的内容刚刚好在背景图片这个区域了