flexslider - Flexslider の全高と全幅

Question

flexslider をブラウザの高さと幅いっぱいにする方法を探しています。ブラウザーのサイズを大きくすると、画像は拡大縮小されますが、ブラウザーを小さくすると、ある時点よりも下部に多くのスペースができます。どうすればこれを修正できますか。フレックス スライダーには最もシンプルなセットアップを使用します。

ありがとうございました。

キャスパー

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

Answer 2

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