Flexslider full height and width

问题:

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.

Thank you.

Casper

回答1:

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

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;
}

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

回答2:

Read this SO answer

I had some problems with Foundation 4 overwriting the effect, thus my 'img' styling looks like this:

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