我正在寻找如何使我的 flexslider 成为浏览器的完整高度和宽度。当我将浏览器调整为更大的格式时,图像会缩放,但是当我将浏览器缩小时,在某些时候底部会有很多空间。我怎样才能解决这个问题。我为我的 flex 滑块使用了最简单的设置。
谢谢你。
卡斯帕
我正在寻找如何使我的 flexslider 成为浏览器的完整高度和宽度。当我将浏览器调整为更大的格式时,图像会缩放,但是当我将浏览器缩小时,在某些时候底部会有很多空间。我怎样才能解决这个问题。我为我的 flex 滑块使用了最简单的设置。
谢谢你。
卡斯帕
您可以使用背景图像和背景封面来适应或填充图像。
在我的例子中,覆盖 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>
...
阅读这个SO 答案
我在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;
}