需求點：

設計師給了一張超大背景圖，需要做一個不知道大小廣告位，要求就是要把圖片撐滿整個頁面，而且還得保證自適應。

解決方案一 （親測有效）

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的，這樣就可以保證，里面的內容剛剛好在背景圖片這個區域了