需求點(diǎn)：

設(shè)計(jì)師給了一張超大背景圖，需要做一個(gè)不知道大小廣告位，要求就是要把圖片撐滿(mǎn)整個(gè)頁(yè)面，而且還得保證自適應(yīng)。

解決方案一 （親測(cè)有效）

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的值為設(shè)計(jì)圖的寬高比

解決方案二

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%，根據(jù)圖片大小比例，那就自己算一下吧*/ }

這塊實(shí)際上做的就是用before占用一塊位置，把相應(yīng)的高度撐起來(lái)～
然后里面就可以放任何東西了，當(dāng)然，里面的東西要保持

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

同時(shí)，上一層的position要是relative的，這樣就可以保證，里面的內(nèi)容剛剛好在背景圖片這個(gè)區(qū)域了

總結(jié)

以上是生活随笔為你收集整理的图片做背景撑开div的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。