全高标题图片答案

【问题标题】：full height header picture全高标题图片
【发布时间】：2012-11-14 02:24:40
【问题描述】：

我在这里查看这个网站： platetheslate

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

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

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

提前致谢！

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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);
}

【讨论】：

感谢 Chrome 开发工具 :)
当您需要找出那个网站提供全尺寸图片时的最佳选择。