Flexslider 全高和全宽答案

【问题标题】：Flexslider full height and widthFlexslider 全高和全宽
【发布时间】：2014-08-26 05:22:32
【问题描述】：

我正在寻找如何使我的 flexslider 具有浏览器的全高和全宽。当我将浏览器调整为更大的格式时，图像会缩放，但是当我将浏览器缩小时，底部会有很多空间。我怎样才能解决这个问题。我为我的 flex 滑块使用了最简单的设置。

谢谢。

卡斯帕

【问题讨论】：

标签： flexslider

【解决方案1】：

您可以使用背景图片和背景封面来调整或填充图片。

在我的例子中，覆盖 flexslider CSS 是这样的：

.flex-viewport{
    position: fixed;
    width: 100%;
    height: 100%;
}

.flexslider .slides,
.flexslider .slides > li
{
    height: 100%;
}

.flexslider .slides > li{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

然后在HTML中设置图片为CSS背景：

...
<ul class="slides">
    <li style="background-image:url(images/slide-01.jpg)"></li>
    <li style="background-image:url(images/slide-02.jpg)"></li>
    <li style="background-image:url(images/slide-03.jpg)"></li>
</ul>
...

【讨论】：

【解决方案2】：

阅读此SO answer

Foundation 4 覆盖效果时遇到了一些问题，因此我的“img”样式如下所示：

.flexslider .slides > li .centered img {
    min-height:100%!important;
    min-width:50%!important;
    width:auto!important;
    max-width:none!important;
    display:inline-block !important;
    margin-right:-100% !important;
}

【讨论】：