Html 100％標題響應寬度

Question

如何創建適合瀏覽器屏幕的全寬網站標題？

滑塊例如：http://dandywebsolution.com/skdslider/

我想創建擁有完全100％的寬度單幅圖像的頭部，你可以點擊上面的鏈接和命中（Ctrl + - ），你可以看到瀏覽器中的圖像調整縮小。

Answer 1

在你的CSS，補充一點：

header { 
    width: 100%; 
} 

這裏有一個working fiddle。

Answer 2

取決於您如何使用圖像。

作爲背景圖像，執行：

header { 
    width: 100%; 
    background: url(whatever.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

如果其一個IMG標籤，做到：

header { 
    width: 100%; 
} 

#headerImg { 
    width: 100%; 
} 

你必須設置寬度爲100％，其中包含報頭向上的每個元素body/html。