確保Div是100％

出於某種原因，我無法在整個瀏覽器中獲得跨越100％寬度的圖像。確保Div是100％

你可以找到我的網站here.

我格寫着：

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); 
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; "> 
    </div>

任何幫助，將不勝感激。

來源

2012-08-06 Michael

你可以減少你的問題，你可以發佈在jsfiddle.com，或在你的問題嗎？ – 2012-08-06 14:05:41

將div的寬度設置爲100％將僅使其佔用其所有父元素。父母的寬度是瀏覽器widht的100％嗎？ – Logard 2012-08-06 14:06:06

閱讀http://css-tricks.com/perfect-full-page-background-image/ - 它應該會給你以後的東西。否則，請嘗試''元素'img {width：100％; ''在你的CSS中。 – 2012-08-06 14:06:25

在您的網站中，您將div伸展到整個頁面寬度。但背景圖像不會伸展，除非你這樣做：

background-size: 100%;

來源

2012-08-06 14:06:00 Tchoupi

這會使圖像伸展，但當瀏覽器變得更纖薄時，它會將文本和菜單壓低。這可以解決嗎？ – Michael 2012-08-06 14:37:10

背景圖像沒有調整大小與包含它們的元素的大小。爲什麼不使用

<img class="home" src="http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg" 
    style="background-attachment: fixed; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; "> 
</div>

，並刪除財產

height: 560px;

？

來源

2012-08-06 14:06:40

添加background-size: 100% auto;

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); 
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100% auto;"> 
    </div>

來源

2012-08-06 14:07:37 MakuraYami

這會產生與Mathieu lmbert的答案一樣的問題。 – Michael 2012-08-06 14:39:20

使用此CSS屬性

background-size:100% 560px;

它告訴你的背景圖片應該擴大到100％的寬度，但具有560像素的高度。

來源

2012-08-06 14:08:26

當我使瀏覽器更加苗條時，這會壓縮我的圖像。 – Michael 2012-08-06 14:35:26

只需根據需要更改高度參數。 – 2012-08-06 14:39:43

添加背景大小：100％自動;作品在一定程度上，但文本和菜單不再適應它。我的意思是圖像隨瀏覽器一起移動，但文本沒有。我已經更新了該網站。 – Michael 2012-08-06 14:54:41

我不喜歡拉伸圖像以適應瀏覽器窗口的想法。因爲這取決於客戶機器上網站的顯示方式。

因此，我不會建議搜索這種解決方案。更確切地說：

使用重複的圖像作爲背景
修正圖像容器的尺寸。您嘗試創建的效果仍然看起來很酷
檢測屏幕大小並根據分辨率更改背景。

來源

2012-08-06 14:25:03 Starx

確保Div是100％

回答

相關問題