Cycle2以响应高度为中心

Question

我使用Cycle 2插件。 我正在尝试制作具有响应高度的居中幻灯片。

http://jsfiddle.net/Tancrede/gnH9H/4/

.slideshow {
    height: 100%;
    width: 100%;
    margin: 0;
    z-index: 1000;
    overflow: hidden;
}

.slideshow img {
    width: auto;
    height: 100%;
    text-align: center;
    opacity: 0;
    filter:alpha(opacity=0);
}

我希望此幻灯片能够很好地顺利运行。 主要观点是图像具有不同的大小，但它们都是视口的100％，并且它们必须居中（如果视口太小，甚至可以裁剪）。

我看到这个命题似乎有效（我不知道如何使这个解决方案适应我的问题）：

Responsive background with maintained aspect ratio

但我只对高度感兴趣，我不是在寻找一个真正的全屏。

我的猜测是解决方案是使用javascript，但我不知道从哪里开始......

Answer 1

自从你提出这个问题以来已经过去了一段时间，但是我遇到了类似的情况，想要添加我的解决方案。我已经编辑了你的小提琴，让它按照我认为你想要的方式工作。不需要一些额外的javascript（至少不在我的测试环境中）。

http://jsfiddle.net/tvgemert/gnH9H/8/

将html，body height设置为100％可以解决问题：

body,html {
    margin: 0px;
    background-color: red;
    height: 100%;
}