1

我使用循环 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%，并且它们必须居中（如果视口太小，甚至可以裁剪）。

我已经看到了这个似乎可行的提议（我不知道如何使这个解决方案适应我的问题）：

保持宽高比的响应式背景

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

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

4

1 回答 1

0

自从您问这个问题以来已经过了一段时间，但我遇到了类似的情况并想添加我的解决方案。我已经对您的 Fiddle 进行了一些编辑，以使其按照我认为您想要的方式工作。不需要一些额外的 javascript（至少在我的测试环境中不需要）。

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

将 html,body height 设置为 100% 就可以了：

body,html {
    margin: 0px;
    background-color: red;
    height: 100%;
}
于 2014-02-18T15:58:26.563 回答