0

私は次の問題を抱えています: 私のウェブサイトの 1 つにレスポンシブな全画面画像スライダーがあります。画像サイズは常にウィンドウ サイズに適応します。私の解決策は次のとおりです。

.picture {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    background-position: center center;
    position: relative;
    overflow: hidden;
    min-width: 100%;
}

<div class="owl-carousel slides">
    <div class="slide">
        <div class="picture" style="background-image: url('myURL')"></div>
    </div>
</div>

問題は、ページの読み込み時にスライダーの位置でページの他のコンテンツが表示されることです。これは、ページの読み込み時に画像コンテナーに幅がないためです。幅は、画像の幅に基づいて計算されます。理解を深めるために: ページを読み込んでいると、少しの間、上部に div コンテンツが表示され、スライダーが読み込まれ、コンテンツが本来あるべきスライダーの下にあります。

誰にも解決策がありますか？

前もって感謝します！

4

1 に答える 1

1

CSS3 Viewport Unit を試すことができます。

.picture {
    width: 100vh;
    height: 100vh;
}

ブラウザのサポートは、IE を除いて問題ありません。

于 2015-08-12T14:57:54.327 に答える