jQuery Cycle2幻灯片与响应高度，以及宽度

Question

我正在尝试使用jQuery Cycle2插件创建图像幻灯片，该插件将响应，调整为浏览器宽度和高度。我能够使用动态容器大小文档从自动高度功能得到的宽度工作良好。

看看我在这里做的小提琴，这是一个网站建设的简化表示，我正在工作。

是否有可能以某种方式给幻灯片.cycle-slideshowdiv的max-height:100%; ?

总的来说，我面临的问题是，长人像图像不适合我的网站设计，用户必须滚动才能看到完整的图像，这不是很好。

许多谢谢。

Answer 1

这个有点晚了，但我还是要试一试。

假设你所有的图片都不是相同的高度:这是一个小技巧，即使是不同尺寸的图像，也可以使容器保持相同的大小。

伪术语

1. 让你的图片成为幻灯片的"背景"，而不是放在里面。
2. 为CSS添加{background-size: cover}。
3. 使用Cycle2的自定义模板来初始化。(黑客?嗯，不是真的)

让我们获得一些新的CSS规则:

.cycle-overlay {
    position:absolute;
    bottom:auto;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    background:#333;
    padding:0;
    opacity:1
}
.banner-background {
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
}
.cycle-slideshow {
    width:100%;
    max-height:400px;
    background-position:center;
    background-size:cover;
    color:#fff;
    overflow:hidden;
}

HTML

<div class="cycle-slideshow" 
  data-cycle-slides='li' 
  data-cycle-fx='scrollHorz' 
  data-cycle-speed='700' 
  data-cycle-timeout='7000'    
  data-cycle-overlay-template="<div class=banner-background style=background-image:url(http://domain.tld/images/{{background}})></div>" 
>
    <ul>
       <li data-cycle-background="slide1.jpg"></li>
       <li data-cycle-background="slide2.jpg"></li>
       <li data-cycle-background="slide3.jpg"></li>
    </ul>
    <div class="cycle-overlay"></div>
        </div>

在JS

$('.cycle-slideshow').on('cycle-before', function (opts) {
    var slideshow = $(this);
    var img = slideshow.find('.banner-background').css('background-image');
    slideshow.css('background-image', img);
});

---

假设你所有的图片都是相同的高度:几个月前我写了一个关于将animate.css与Cycle2集成的示例

这不是你想要的，但是这个例子提供了一个全宽自动高度的解决方案。

检查代码，你会得到你需要的。

小提琴!

同样，记住Cycle2你需要添加额外的插件到中心幻灯片jquery.cycle2.center.js

希望这有帮助，干杯!