網頁是怎麼用css實現在pc端，背景圖全屏顯示？

在不同解析度的屏幕下都是寬高100%顯示，當拉伸窗口時，背景圖超出部分隱藏而不是隨窗口大小而改變寬高。虛心請教下各位大神。

---

請轉至這個地方：不用vh,vw,vmin,vmax,rem,em單位，不用js，如何獲得一個鎖定高寬比的響應式盒子？ - 知乎用戶的回答

---

GitHub - yujiangshui/jquery-bgimgcenter: bgimgcenter 讓背景圖片 無拉伸、無變形、無縫隙、很居中

需要計算下。

---

看了上面幾個答案，都和我的想法不太一樣，莫非我題意理解錯了？

我常用的做法是：

1、背景圖做成1920*1080

2、

.bg{background:url(bg.jpg) no-repeat center top;}

---

這是我經常用的代碼：

.bg {

width: 100%;

height: 100%;

background-image: url(../img/bj.png);

background-size: 100% 100%;

}//這種效果會隨著瀏覽器寬高拉伸，如果網頁內容太多就會拉的太高，圖片會失真。

.bg {

width: 100%;

height: 100%;

background-image: url(../img/bj.png) no-repeat fixed;//圖片不平鋪，不拉伸，固定位置；

background-size: 100% 100%;//寬高都是百分百；

}//這種比較好用，效果會隨著瀏覽器窗口大小鋪滿，如果網頁內容太多只是內容會隨著滾動條滾動。而圖片固定，不會滾動拉伸；

---

看了這麼多回答。難道不是 cover ?

---

background: url() top center no-repeat;

background-size: cover;

---

我也研究過題主提出的問題。我的思路是通過JavaScript改變CSS中的背景寬度。

我解決這個問題的方案為:

1.準備一張正方形、高解析度的背景圖片

2.先使用JavaScript獲取頁面的寬度和高度。

瀏覽器可見區域寬度獲取方法:document.body.clientWidth

瀏覽器可見區域高度獲取方法:document.body.clientHeight

3.判斷屏幕的長寬比(橫的、豎的、正方形的)

4.如果可見區域寬度大於高度，則把背景圖片的寬度設置為可見區域的寬度;如果可見區域高度大於寬度，則把背景圖片的寬度設置為可見區域的高度。

(由於背景圖片為正方形，所以能夠完美地全屏顯示。)

至此，問題解決。

---

本人才入行五個月，對於這種問題，我一般是這樣寫的：

body {

width: 100%;

height: 100%;

font-family:"微軟雅黑";

background-image: url(../img/footer.png);

background-size: 100% 100%;

}

如有不對，望指教

---

設置一個最大的寬度

---

推薦閱讀：