jQuery循环幻灯片调整大小问题

Question

在这个页面中，我有一个闪屏位于中间，宽度为100％，每8秒旋转图像。在此幻灯片放映中，我有3个div。主要的div包含了幻灯片放映，内部div具有重复器背景图像，再在其内部添加渐变图像。 问题1. 当您尝试缩小浏览器时......网站内容会自动调整并移到左侧.....但是我的幻灯片放映内容不会......目前我没有内容，但您可以通过黑色边框看到这一点。幻灯片放映仍然位于中间。

如何解决这个问题？ 问题2. 当浏览器宽度变窄且加载此页面后，幻灯片放映会呈现在中心位置。现在最大化浏览器，您将看到因为幻灯片放映在较小的屏幕上呈现出来，它会在两侧留下空白，并且div不会随着浏览器的大小而调整大小。

我已经尝试过许多方法，所以任何帮助和建议都受欢迎。

- Zeus

---

我觉得你或管理员刚刚编辑了那部分...很抱歉，但情况有点紧急...谢谢。 - Zeus

Answer 1

我以前从未使用过jquery.cycle，但它会根据渲染时的初始浏览器宽度来调整你的宽度。在调整浏览器大小时，这些宽度也没有被调整，这就导致了你的最终问题。

查看你的CSS，似乎你正在尝试直接将100%的宽度设置给这些div（由于jquery.cycle直接应用宽度覆盖它，所以这并没有生效）。一个即时的解决方案是在CSS中在div元素的宽度后立即指定!important（强制元素直接使用你的CSS）。

例如（我们来看第一个蓝色的div）：

.fadein {
   width: 100% !important
}

.hd_splash_container_blue {
   width: 100% !important
   poisition: relative;
}

.main_blue {
   margin-left:70px;
   margin-right:70px;
   position: relative;
} 

这应该允许您成功调整浏览器大小，使内容保持居中。我建议在更高的级别上应用您的CSS，因为每个高级别之间唯一的变化是图像（可以像现在一样完成）。将其余CSS删除并在高级别上应用：

.hd_splash_container {
   width: 100% !important
   poisition: relative;
}

.main_color {
   margin-left:70px;
   margin-right:70px;
   position: relative;
} 

- rickp

Answer 2

我相信使用Cycle插件的本地选项实际上可以达到完全相同的效果。试着像这样添加这些规则：

$('#slides').cycle({ 
  resizeContainer: false,
  slideResize: false
});     

- internetross