制作全屏幻灯片.CSS宽度问题

Question

好吧，这就是交易。我认为我不想为此使用jQuery插件，因为我想学习并保持一切清洁。

我正在尝试创建一个全屏的水平幻灯片。

我有一个100％宽度＆amp;高度。

我有一个宽度为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>

Answer 1

ok resize（）jQuery函数工作。由于主要容器没有溢出：隐藏。

，这个问题似乎是出现的。

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