英雄形象隐藏内容直到滚动

Question

我喜欢中型网站，特别是他们的Beautiful Stories pages。我正在试图弄清楚他们如何处理这些页面。

如果您的浏览器窗口足够大，您可以看到封面图片和下面的一些内容。

但是，如果调整浏览器窗口的大小，图像的底部会触及浏览器窗口的底部，并使用broswer窗口调整大小。 Aldo内容被隐藏，直到您滚动。

我正在试图弄清楚他们是如何做到这一点的，并且我已经在我的基本页面结构中设置了CodePen：http://codepen.io/realph/pen/luwdJ

任何人都可以解释我是如何达到类似效果的吗？

感谢任何帮助。提前谢谢！

Answer 1

试试这个，

<强>更新

$(document).ready(function() { 
        var $winwidth = $(window).width();
        $("img.source-image").attr({
            width: $winwidth
        });
        $(window).bind("resize", function(){ 
            var $winwidth = $(window).width();
            var $winheight = $(window).height();
            $("img.source-image").css({
                'width': $winwidth,'height':$winheight
            });
         });
    }); 

上述脚本会根据屏幕宽度改变图像宽度

和Css

img.source-image {
    position: absolute;
    top: 0;
    left: 0;
}

或者

#img.source-image {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

有关详细信息，请按照此Link

进行操作