jQuery Cycle 2响应中心幻灯片

Question

我正在尝试使用优秀的Cycle 2 jQuery插件设置响应式图像库.画廊将展出肖像和风景图像.

我使用的是Centered Slides选项(Cycle2的中心插件:http://jquery.malsup.com/cycle2/demo/center.php),这似乎导致Webkit浏览器出现问题(尝试调整浏览器窗口大小,如果这不是'一开始很明显!)

http://goo.gl/NFFZk

绿色背景代表循环容器.

如果没有添加中心选项(data-cycle-center-horz = true data-cycle-center-vert = true),整个过程运行良好,请参阅:

http://goo.gl/p76wi

我无法弄清楚导致中心版本问题的原因.

图像上的CSS代码非常小:

.cycle-slideshow img {
    max-height: 100%;
    max-width: 100%;
}

包含元素的CSS就在这里

.cycle-slideshow {
    background: green;
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin:20px auto;
    padding:0;
    width:80%;
    }

非常感谢您的帮助!

Answer 1

在查看了不合作的示例后，似乎内联样式可能会让您感到头痛。以下是第二张图片（koy 鱼）引用的 HTML：

<img src="http://www.freeimageslive.com/galleries/nature/animals/pics/nishikigoi.jpg" style="position: absolute; top: 0px; left: 0px; z-index: 99; display: block; margin-left: 205px; opacity: 1;" class="cycle-slide cycle-slide-active">

这里要注意的是margin-left设置为 的属性205px。要显示居中的动态或响应式图像，需要一些数学知识。您将需要使用偏移量来完成此操作。将图像设置为left: 50%将使图像的左侧与容器的中间对齐。margin-left到达那里后，您将使用一半宽度的负片将图像置于真正的中心。（例如，如果图像的宽度为80px，那么您将使用 CSS left: 50%; margin-left: -40px;。