jQuery Cycle Plugin 可伸缩 DIV 和 containerResize=1答案

【问题标题】：jQuery Cycle Plugin scalable DIV and containerResize=1jQuery Cycle Plugin 可伸缩 DIV 和 containerResize=1
【发布时间】：2012-05-04 08:36:49
【问题描述】：

我在一个页面上使用 jQuery Cycle (full) 插件，我在该页面上使用宽度为 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;
}

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

containerResize: 0 也没有带来想要的效果（然后它会忽略图像的高度并将包装器的高度调整为 .content-right 的高度（并切断图像）。

当我只使用图像而不加载循环时，一切正常。

有什么解决办法吗？

谢谢！

【问题讨论】：

标签： jquery-cycle

【解决方案1】：

在JS中设置：

containerResize: 0,
slideResize:   0,

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

【讨论】：

【解决方案2】：

如何在图像上尝试max-width: 100% !important;，并从width: 100% !important 中删除!important，这样当循环尝试将幻灯片大小调整回原始宽度时，您的最大宽度定义将优先。

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

【讨论】：