Flexslider全高和全宽 [英] Flexslider full height and width

问题描述

我正在搜索如何使flexslider达到浏览器的整个高度和宽度.当我将浏览器调整为更大的格式时，图像会缩放，但是当我使浏览器缩小时，图像会比底部缩小很多. 我怎样才能解决这个问题. 我为我的flex滑块使用了最简单的设置.

I am searching how I can make my flexslider the full height and width of my browser. When I resize the browser to a larger format, the images will scale, but when I make the browser smaller, than at some point there will be a lot of space at the bottom. How can I fix this. I use the most simple setup for my flex slider.

谢谢.

Casper

推荐答案

您可以使用背景图像和背景封面来填充或填充图像.

You can use background images and background cover to FIT or FILL the images.

就我而言，是这样的东西来覆盖flexslider CSS:

In my case, it was something like this to overwrite the 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背景:

And then in the HTML set images as CSS background:

...
<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>
...

这篇关于Flexslider全高和全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！