如何防止超出瀏覽器窗口的圖像設置頁面的寬度？

Question

我有一個很長的圖像，目前正在作爲一個網站在開發中的導航系統。你可以看到它here。這個導航系統最終會分成更小的部分，但我想我可能會看到我現在看到的同樣的問題。

圖像寬度爲1920px，想法是，無論用戶的瀏覽器窗口（高達1920px），導航圖像（分支）都將始終延伸到屏幕外。導航系統中央的葉子應始終位於頁面中央以與上面的徽標相匹配。

導航DIV目前有以下CSS：

#nav { 
    position: absolute; 
    top: 210px; 
    left: 50%; 
    margin-left: -960px; 
} 

主體具有的900px一最小寬度。

有我在此設置有兩個問題：

1. 正如你會看到，當您訪問的頁面，瀏覽器頁面的寬度由長圖像的右邊緣設置當瀏覽器窗口的寬度大於900px時，導航系統會將其設置爲100％;如果瀏覽器窗口的寬度小於900px，則導航系統會將其設置爲900px（使用水平滾動條）。

2. 導航系統並不尊重身體的最小寬度，即，即使瀏覽器窗口的寬度小於900像素，導航系統仍然繼續向左移動，而頁面內容的其餘部分不會向左移動，噸。

有人可以幫助解決這些問題嗎？

感謝，

尼克

Answer 1

我會怎麼做，是

1. 切出的圖像（一個與實際內容）的中間部分。

2. 從線條背景中取出可以無限重複的切片。像這樣：

3. 把圖像的中間部分爲div是寬100％，具有

   background-image: url(/path/to/slice.png); 
   background-repeat: repeat-x; 
   

會給你無限可調整大小的導航區域，不會無謂地擴大這一頁。