-1

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

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

我有一个 100% 宽度和高度的容器 div。

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

1 回答 1

0

Ok the resize() jquery function worked. The issue seemed to have come about due to the main container not being overflow:hidden.

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

$(window).resize(function() {
    docuW = $(document).width();
    $(".imgBlock").css({'width': docuW });  
});
于 2012-12-27T00:02:35.033 回答