製作全屏幻燈片。 Css寬度問題

-1

好吧，這是交易。我決定我不想使用jquery插件，因爲我想學習並儘可能保持乾淨。製作全屏幻燈片。 Css寬度問題

我試圖創建一個全屏水平幻燈片。

我有一個容器div是100％寬度&高度。

我有寬度的子容器說999％

該子容器我有浮動左圖像中

，但這裏的問題：我希望每個圖像是主要的容器的寬度div或100％，而不是子容器。我是這樣做的，所以根據瀏覽器大小調整圖像的比例，所以我不能給它一個特定的px大小。

任何想法我可以怎麼做呢？我已經嘗試在窗口大小調整上使用jquery來獲取並設置圖像div的大小爲文檔大小，但由於某種原因它不起作用。只要調整窗口大小，圖像寬度就會跳過文檔寬度的100％。

編輯：按照要求這裏是一個代碼的例子。基本上，我想使.imgBlock寬度始終是主容器的寬度。我不能使用100％作爲寬度，因爲它位於子容器中，其寬度可變。

#mainContainer { 
float:left; 
width:100%; 
height:100px; 
position:relative; 
background:#000;   
} 

#subContainer { 
width:auto; 
height:100%; 
background:#f00; 
float:left; 
} 

.imgBlock { 
float:left; 
height:100%; 
border:1px solid #fff;  
} 

<div id="mainContainer"> 
<div id="subContainer"> 
    <li class="imgBlock"><h1>IMAGE</h1></li> 
    <li class="imgBlock"><h1>IMAGE</h1></li> 
    <li class="imgBlock"><h1>IMAGE</h1></li> 
    <li class="imgBlock"><h1>IMAGE</h1></li> 
    <li class="imgBlock"><h1>IMAGE</h1></li> 
</div> 
</div>

來源

2012-12-25 user1828415

如果你從這些分享一些東西，標記，CSS，jQuery，Fiddle會更好 –

請張貼你的CSS/HTML/JS。您可以在http://jsfiddle.net上創建工作示例 –

基本Internet用戶不喜歡調整窗口大小:)所以，您可以從jQuery代碼開始獲取窗口/文檔的寬度和高度。如果您確實需要支持調整大小，請使用.resize（）或.change（）。 –

好的resize（）jquery函數工作。這個問題似乎是由於主容器沒有溢出而出現的：隱藏的。

var docuW = $(document).width(); 
$(".imgBlock").css({'width': docuW }); 

$(window).resize(function() { 
    docuW = $(document).width(); 
    $(".imgBlock").css({'width': docuW }); 
});

來源

2012-12-27 00:02:35 user1828415

製作全屏幻燈片。 Css寬度問題

回答

相關問題