Question

我在页面上使用jQuery Cycle（完整）插件，我在该页面中使用宽度为75％的容器DIV（.content-left）以及该容器内的jQuery Cycle幻灯片。应该自动调整该容器内的图像。

我用：

JS：

$('.slides').cycle({
   fx: 'fade',
   containerResize: 1 // default for jquery.cycle.all
});

HTML：

<div id="content">
   <div class="content-left">
      <div class="slides"> 
          <img src="...">
          <img src="...">
          <!-- etc. -->
      </div>
   </div>
   <div class="content-right">
      some text
   </div>
   <div class="clear"></div>
</div>

CSS：

#content {
   overflow:hidden;
}

#content .content-left {
   width:75%;
   float:left;
}

#content .content-left img {  /* or: .slides img */
   width:100% !important;
   position:relative;
   left:0px;
   top:0px;
   z-index:-2;
}

#content .content-right {
   width:25%;
   float:right;
}

在Page init上，由于containerResize函数，我的包装DIV（.content-left）高度和宽度得到了很好的调整。但是，当我调整浏览器窗口的大小时，幻灯片的宽度和高度保持不变，这不是我想要的。

containerResize：0也没有带来所需的效果（然后忽略图像的高度，并将包装器的高度调整到.content-right的高度（并切断图像））。

当我只使用没有加载循环的图像时，一切正常。

任何解决方案？

谢谢！

Answer 1

在JS中设置：

containerResize: 0,
slideResize:   0,

（真的！）然后在容器div中使用透明图像的技巧。见here 细节。

Answer 2

如何在图片上尝试max-width: 100% !important;，并从!important中移除width: 100% !important，以便在周期尝试将幻灯片调整回原始宽度时，最大宽度定义将优先。

如果你能提供一个jsfiddle，那也会有很大的帮助。

jQuery Cycle Plugin可扩展的DIV和containerResize = 1

2 个答案: