今天需要做一個占滿設備寬度的輪播圖,這裏作為demo僅展示一張圖,下面分別是要操作的圖片(這裏做了縮放處理,實際的圖比較大),以及要實現的效果圖,很明顯兩者是不成比例的:

　 (圖一) (圖二)

這裏給定了寬,也就是設備寬度的100%,同時給定了高,比如這裏設置為8.5rem (html的字體設為20px);

1. 首先我們考慮用img標簽來放圖片路徑,可是這種方法是很難控制圖片高度的,如果我們設置寬度100%,讓高度自適應,那麽實際的高度就有可能跟我們的容器高度不一樣,如圖一,很明顯高度就小於實際的效果圖

如果我們設定了圖片的寬100%,同時又設定圖片的高是容器的100%,同樣道理,要不然圖片就會被拉長,也就是變形了,這樣是非常不好的用戶體驗

　除非圖片是跟容器成比例設計的,不然使用img標簽是沒法達到圖二效果,可以看一下寬100%,高設置為容器設計的8.5rem的效果:

　　 (圖三),很明顯我們可以看到圖片被拉高了......

2. 除了使用img標簽,還有另一種方法,就是使用背景圖的方式.這裏先展示一下使用背景圖實現的圖片及代碼:

(圖四)

我們可以看到主要用到了background相關的屬性來實現了效果圖,可因為圖片與容器不成比例,所以這裏就會舍棄了圖片兩邊的部分.

-------------------------------------------------這裏是代碼分割線 Begin ----------------------------------------------

<style>

　　body {

　　　　margin:0 ; /*這裏只做簡單的初始化*/

　　}

　　.xh-lxx-one-img {
　　　　display: block;
　　　　width: 100%;
　　　　height: 8.5rem;
　　　　line-height: 8.5rem;
　　　　color: #333333;
　　　　text-align: center;
　　　　background: url(img/59662e5bNa454c17d.jpg) no-repeat;
　　　　background-color: #DDDDDD;
　　　　background-size: cover;

</style>

html代碼:

　　<a class="xh-lxx-one-img"> <!--這裏用a標簽作為圖片的容器,是因為考慮到真正運用到項目中會有鏈接跳轉-->
　　　　<span>BANNER單頁</span>
　　</a>

-----------------------------------------------------------------這裏是代碼分割線 End ---------------------------------------------------------------

background的定義和用法

background 簡寫屬性在一個聲明中設置所有的背景屬性。

可以設置如下屬性：

• background-color 設置背景顏色
• background-position 規定背景圖片的位置
• background-size 規定背景圖片的尺寸
• background-repeat 規定如何重復背景圖片
• background-origin 規定背景圖片的定位區域
• background-clip 規定背景圖片的繪制區域
• background-attachment 規定背景圖像是否固定或者隨著頁面的其余部分滾動
• background-image 規定要使用的背景圖片

這裏主要對圖片定位background-position及尺寸background-size做總結:

background-position:

這個屬性設置背景原圖像（由background-image 定義）的位置，背景圖像如果要重復，將從這一點開始。

提示：您需要把 background-attachment 屬性設置為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。

可能的值:

• top left (默認值), top center , top right, center left , center center , center right , bottom left , bottom center , bottom right 如果您僅規定了一個關鍵詞，那麽第二個值將是"center"。

• x% y% 第一個值是水平位置，第二個值是垂直位置。默認值：0% 0%。

• xpos ypos 左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

就拿本次demo來講,這裏用到了background-size:cover,所以填滿了整個容器,在垂直方向是居中的,這裏只要對水平方向做改變:

　　　 默認值(top left),缺省了圖片右邊的內容 center(居中),缺省了兩邊的部分內容 right(右邊對齊),缺省了左邊的部分內容

background-size:
可能的值:

前兩個值都是需要手動輸入具體的數值來規定背景圖的大小,很容易理解

這裏講一下cover和contain兩個值的不同效果,來看一下效果圖(其他樣式一樣,僅改變該屬性值):

cover(圖片的某些部分不顯示完整) contain(圖片完整顯示,內容區域部分留白)

所以兩者的區別是:

cover: 背景圖完全覆蓋背景區域,圖片的某些部分可能不顯示完整 (簡單來講就是根據最短邊來最大的適應背景區域)

contain: 在內容區域保留圖片的全部內容,內容區域可能不填滿 (簡單來講就是根據最長邊來最大的適應背景區域)

總結: 如果不能保證圖片的寬高與所設計的容器成比例,那麽就可以使用background-position:center和background-size:cover結合使圖片居中填滿容器.

背景圖background的例子分析及相關屬性