0

最初は再生ボタンのみを含むセクションがあり、クリックするとビデオ ギャラリーが表示されます。backgroundこのセクションには、セクション自体に含めることにした画像も含める必要があります ( #intro)。

問題は、再生ボタン以外にセクションに何もないため、背景画像全体を表示するのに十分なほど背景が垂直方向に引き伸ばされていないことでした。padding-bottom57.201%を含めることでこれを改善しました。最初は修正されましたが、再生ボタンを中央に配置する必要があり、マージンとパディングを使用してそれを実行しようとすると、パーセンテージのためにブラウザのサイズを変更した後、画像の下部に大きなギャップが表示されて混乱しました。に設定しpadding-bottomます。

そのため、応答性を高める必要があり、小さな画面のデバイスのユーザーに対応するために、いくつかのブレークポイントも設定したいと考えています。

これは、より良いアイデアを提供するためのスクリーンショットです。中央の再生ボタンをクリックすると、ビデオ ギャラリー ( #feat-video) が白い輪郭の長方形内にポップアップするはずです。

ここに画像の説明を入力

HTML

<section id="intro">
    <div class="section-wrap">
        <a class="video-toggle" href="#">Toggle</a>
        <div id="feat-video" style="display:none">
            (video gallery here)
        </div>
    </div><!-- .section-wrap -->
</section>

CSS

#intro {
    background: url("img/intro-banner.jpg") no-repeat center top $color__brand-blue;
    background-size: cover;
    padding-bottom: 57.201%;

    #feat-video {
        padding-top: 224px;
    }
}
4

1 に答える 1

0

あなたが javascript/jQuery ソリューションを求めていないことは知っていますが、これを使用して背景を完全に合わせることができます。

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

$('#intro').css('min-height', viewport().height);

アップデート

サイズ変更の効果を維持したい場合 (通常は必要ありませんが、ページの読み込みで十分です)、jQuery にそれぞれの呼び出しを追加する必要があります。以下は、デモ用に作成したフィドルです: http://jsfiddle.net/zgzt8dom/3/

于 2014-09-08T09:44:39.493 に答える