javascript - フルハイトのヘッダー画像

Question

私はこのサイトを見ています： platetheslate

ここで別のユーザーの質問から見つけましたが、自分の質問があります。

ヘッダー画像はどうやって作るのFULL HEIGHTですか？CSSの「カバー」要素でも全幅/高さを取得できることは知っていますが、それは私が得ているものではありません。

彼らはどのように設定したので、ディスプレイ/ウィンドウが全画面を占めるサイズ（高さ）に関係なく、下にスクロールするまで常に写真が表示されていても.

前もって感謝します！

Answer 1

彼らのJavascriptはここで縮小されていないことに注意してください：http ：//www.platetheslate.com/wp-content/themes/twentyeleven/js/jquery.main.js

画像の高さと幅を設定する方法は次のとおりです。

//initHImage
function initHImage() {
    var minWidth = 1100;
    var holder = jQuery('#h-image');
    var image = holder.find('img');
    var win = jQuery(window);
    var ratio = image.width() / image.height()

    image.removeAttr('height width');
    holder.css({
        overflow: 'hidden',
        position: 'relative'
    });

    function setSize() {
        var winW = win.width();
        var winH = win.height();
        var W = Math.max(winW, minWidth);
        var winRatio = W / winH;

        holder.css({
            width: W,
            height: winH
        });

        if(winRatio > ratio) {
            image.css({
                width: W,
                height: W / ratio,
                marginTop: Math.min((W - W / ratio) / 2, 0),
                marginLeft: 0
            });
        }
        else {
            image.css({
                width: winH * ratio,
                height: winH,
                marginTop:0,
                marginLeft: Math.min((W - winH * ratio) / 2, 0)
            });
        }
    }
    setSize();

    win.bind('resize orientationchange', setSize);
}

Answer 2

これにより、高さに比例して幅がスケーリングされます。

#id {
    position: relative;
    height: 100%;
    width: auto;
}

Answer 3

ヘッダーの css クラスで、height: 100%