Question

好的，这是交易。我已经决定不想使用jquery插件，因为我想学习并尽可能保持干净。

我正在尝试制作全屏水平幻灯片。

我有一个100％宽度的容器div＆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

好的resize（）jquery函数工作正常。这个问题似乎是由于主容器没有溢出而造成的：隐藏。

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

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

制作全屏幻灯片。 Css宽度问题

1 个答案: