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);
}

全高标题图片

3 个答案: