流體標題背景圖像

Question

我在流體頁面中的標題背景圖像有問題。無論瀏覽器寬度或標題內容如何，​​我都希望能夠看到整個圖像。我可以讓圖像填充100％的寬度。然而，高度總是會調整大小以適應標題的文本內容（當然它應該這樣做）。我試圖實現的是將頭部調整爲100％寬度，並保留調整大小的圖像的全高，並保持其縱橫比。

Answer 1

如果你保持圖像中的流動，幾乎得到它需要0％的寬度，你可以得到你在找什麼： http://codepen.io/gc-nomade/pen/qunsm

header { 
    white-space:nowrap;/* make sure content keeps aside image */ 
} 
header img { 
    width:100%; 
    margin-right:-100%;/* it will pull at left whats stands on right */ 
} 
header div { 
    position:relative;/* bring it up front */ 
    z-index:1;/* make sure it's on top */ 
    display:inline-block; 
    vertical-align:top; 
    width:100%; 
    white-space:normal; 
}