javascript - 全高标题图片

Question

我在这里看这个网站： platetheslate

我从这里的另一个用户问题中找到了它，但我有自己的问题。

他们如何制作标题图像FULL HEIGHT？我知道您甚至可以使用 CSS“封面”元素获得完整的宽度/高度，但这不是我想要的。

他们是如何设置它的，所以无论您的显示器/窗口大小如何，它都会占据全屏（高度），无论您总是看到照片，直到您向下滚动。

提前致谢！

Answer 1

这应该与高度成比例地缩放宽度。

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

Answer 2

在标题的 css 类中，做height: 100%

Answer 3

请注意，他们的 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);
}