css - Flexslider 2 幻灯片水平和垂直视口/浏览器缩放

Question

我刚刚将 Flexslider 2 集成到一个非常简单的投资组合网页中。

这是我第一次使用 Flexslider，到目前为止它很棒，但是在重新调整浏览器大小时，我无法按照我的意愿缩放幻灯片。

这是我在网上发布的页面示例：

http://www.thisisneil.com/rg-e/index.html

目前，幻灯片在浏览器中完美地水平缩放，但由于页面大小和幻灯片定位，图像底部往往会被裁剪。为了解决这个问题，我希望幻灯片也可以随窗口垂直缩放，但我似乎无法做到这一点！

这是我最终希望我的 Flexslider 行为的示例：（无论窗口大小如何，幻灯片总是会重新格式化以显示完整图像）。

http://eastphotographic.com/artist.php?region=uk&div=Photography&artist=Linda%20Brownlee

到目前为止，我已经尝试调整 Flexslider CSS 值，并将整个滑块包含在一个单独的 div 集中以随窗口重新调整大小。我显然没有正确地做任何事情！

任何想法将不胜感激。

Answer 1

调用 flexslider 时只需添加 smoothHeight: true 。

<script type="text/javascript">
$(window).load(function(){
    $('.flexslider').flexslider({
        animation: "slide", // set animation to slide
        smoothHeight: true // auto-adjust to fit the height of images
    });
});