當前很流行的一種網頁形式就是滿屏大圖，本文將用最簡單的方式實現該效果。用到了CSS 屬性background-size ,無需javascript。
核心概念
使用background-size 屬性，填充整個viewport
當css屬性background-size 值為cover時，瀏覽器會自動按比例縮放背景圖的寬和高，直到大於或等於viewport的寬和高
使用媒體查詢為行動裝置提供更小尺寸的背景圖
為什麼要給行動裝置提供小尺寸背景圖呢?在demo中，我們看到的背景圖的實際尺寸為5498px * 3615px，使用這麼大尺寸圖片的目的是滿足絕大多數寬屏顯示器，並且不會顯示模糊，而代價就是1.7MB的圖片體積。
但是在行動裝置上沒有必要使用這麼大的圖片，同時大圖還會導致載入變慢，尤其是在移動網路下。
需要說明的是：為行動裝置提供小背景圖對該技術方案來說是可選的。
實踐
HTML
<!doctype html><html><body> ...Your content goes here...</body></html>
後面我們會給body標籤指定背景圖，這樣背景圖就可以填充整個瀏覽器viewport了。
其實，該方案對所有的塊級容器都可以生效。如果你的塊級容器的寬高是動態，那麼背景圖將自動調整，充滿整個容器。
CSS body標籤的樣式如下：
body {/* 載入背景圖 */background-image: url(images/background-photo.jpg);/* 背景圖垂直、水平均置中 */background-position: center center;/* 背景圖不平鋪 */background-repeat: no-repeat;/* 當內容高度大於圖片高度時，背景映像的位置相對於viewport固定 */background-attachment: fixed;/* 讓背景圖基於容器大小伸縮 */background-size: cover;/* 設定背景顏色，背景圖載入過程中會顯示背景色 */background-color: #**46;}
上面最重要的一條就是：
background-size: cover;
這樣瀏覽器就會按比例縮放背景圖直至背景圖寬高不小於容器的寬高(在上面的例子中，就是body標籤)。
這裡需要注意的一點就是：如果背景圖小於body標籤的尺寸(例如在高解析度顯示器上，或頁面內容特別多時)，瀏覽器會展開圖片。我們都知道，當把一個圖片展開時，圖片會變模糊。
因此，在選擇背景圖時，要特別注意尺寸。為了照顧到大尺寸螢幕，demo裡用的圖片尺寸為5498px * 3615px 。
同時，為了讓背景圖始終相對於viewport置中，我們聲明了：
background-position: center center;
上面的規則會把背景圖縮放的原點定位到viewport的中心。
接下來我們需要解決的問題是：當內容的高度大於viewport的高度時，會出現捲軸。我們希望背景圖始終相對於viewport固定，即使使用者滾動時也是一樣。
解決辦法就是：
background-attachment: fixed;
(可選)使用媒體查詢應對小螢幕
為了應對小螢幕，我用photoshop將背景圖按比例縮放到768px * 505px，然後通過smush.it 壓縮圖片體積。這樣就將圖片體積從1741KB降到114KB，節省了93%。 下面是媒體查詢的寫法：
@media only screen and (max-width: 767px) { body { background-image: url(images/background-photo-mobile-devices.jpg); }}
上面的媒體查詢將max-width: 767px 設為斷點，也就是說當瀏覽器viewport大於767px時，會使用大背景圖，反之使用小背景圖。
使用上面媒體查詢不利的一面是，如果你把瀏覽器視窗從1200px縮小到640px(反之亦然)，你會看到一個短暫的閃爍，因為小背景圖或大背景圖正在載入。
原文地址：http://www.html-js.com/article/2569
原文作者：Button
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
