類型中所使用的佈景圖(100px*122px)

指定佈景圖片寬度200px高度auto
 

濫觞：http://www.kip.com.tw/modules/news/article.php?storyid=35

此規範和上個典範榜樣，都是設定背景圖片寬為200px，但分歧點在於此類型的高度為auto，高度是共同寬度作比例的縮放，此為它的優點。

cover使後臺圖不靠repeat，占滿全部內容版面。

網頁設計結果出現為了讓呈現結果有顯著的區分，規範中的屬性預設為：
width:300px;height:200px;border:1px solid #CCC;background:#FFFFFF url(bg.jpg) no-repeat left top;
 

佈景圖可依內容元素的寬高，作百分比的縮放，同樣要注意數值的設定，避免佈景圖片變形失真，如同類型。

background-size：percentage

指定後臺圖片寬度50%高度100%
 

background-size：length

指定背景圖片寬度200px高度150px

background-size：cover
 

指定配景圖片巨細
background-size：bg-size , bg-size
bg-size = auto | length | percentage | cover | contain

• 預設值為auto，即佈景圖片原始長寬。
• length指定圖片具體巨細的數值，不許可負值。
• percentage以後臺圖地點元素的百分比指定佈景圖巨細，不允許負值。
• length與percentage可設定2數值，也可只設定1個數值，當只設定一個數值，另外一個數值(高)預設值為auto，此時高度以後臺圖原始寬高比例，自動縮放。
• cover首要用於後臺圖小於地點的內容，而背景圖又不合適使用repeat，此時就可以採用cover的體式格局，使後臺圖放大至內容的巨細，但此方式容易使背景圖因放大而失真。
• contain與cover正好相反，首要用於佈景圖大於所在內容，但卻需要將後臺圖完全顯現，此時就可採用contain的方式，使後臺圖縮小至內容的大小。

指定配景圖片寬度50%高度auto
 

CSS 3 瀏覽器支援狀況

此典範榜樣和上個典範榜樣，都是設定佈景圖片寬為50%，但不同點在於此範例的高度為auto，高度是共同寬度作比例的縮放，此為它的長處。

雖可隨便指定圖片巨細，但假如數值沒取好，輕易使背景圖變形失真，猶如此典範榜樣。

auto取自原背景圖片的尺寸不作任何的點竄，所以呈現效果和沒加background-size效果是一樣的。

background-size：auto;