2013-03-11 88 views
0

對不起,第一個問題。我有點通過反覆試驗來了解這一切。無論如何,我無法弄清楚如何複製這1個腳本。java腳本根據窗口大小展開div和bg圖像

我想要做的是使用javascript或somthing基於窗口的大小擴大div和bg圖像內部的div。有關我正在嘗試執行的示例,請參閱42floors

我的項目是格式化

/* header */ 

/* I want to expand dynamically */ 
<div> 

/*Content area with title showing at bottom like example site, even when window is expanded. */ 
<div> 

/* footer */ 

任何有識之士或者方向將是非常有益的。謝謝。

回答

1

只是看看他們的源代碼。他們使用以下內容:

#container { 
    width: 100%; 
    background: url(your-image.png); 
    background-size: 100%; 
} 

請記住,IE6-8不支持background-size

+0

已經嘗試過,並沒有複製效果。它必須是某種Java腳本。在這個例子中,div class = hero有一個內聯高度樣式,它隨着瀏覽器大小自動改變,而div class = cta-container下面的div也有改變的padding-top。我相信這是通過改變瀏覽器的大小來創建圖像調整大小的效果,並且在調整瀏覽器大小時,使該div保持在該底部區域中的「找到辦公空間的最佳位置」......任何其他提示? – user2151867 2013-03-12 12:40:34

0

一個相當簡單的編程方法是添加事件偵聽器的選項窗口大小調整事件並計算高度/寬度並適當調整圖像/ div的大小。

$(document).ready(function(){ 
    $(window).resize(function(){ 
     //change the size of your div using something like 
     $(div).css("width", value); 
     $(div).css("height", value); 
    }); 
}); 

這個使用jquery的方式。 http://code.jquery.com/jquery-1.9.1.min.js