标题下方的超大幻灯片答案

【问题标题】：Supersized Slideshow below Header标题下方的超大幻灯片
【发布时间】：2013-02-19 10:52:38
【问题描述】：

我正在使用超大的 jquery 插件来显示全屏背景幻灯片。看看这个网站（它不是我自己的，但我使用的是相同的结构）：

http://mysampleconcept.com/situs4/

如您所见（例如，如果您为标题设置一些不透明度），图像从正文顶部开始。但我希望它们从标题下方开始（这样标题就不会覆盖图像的顶部）。

如果你给出超大的 LI，例如 top: 100px;整个图像向下移动，使图像底部消失在我的页脚下方。所以这不是我想要的解决方案。

所以我需要的就是将图像拉伸到它可以最大的尺寸，同时仍然在窗口内而不是拉伸超过顶部 100 像素或底部。

我该怎么做？

对不起，我的英语不是最好的...

我找到了这个解决方案，但我不知道如何实现它：https://stackoverflow.com/a/12889088/1981981

【问题讨论】：

标签： header padding supersized

【解决方案1】：

您可以使用您提到的问题中提供的解决方案作为起点。只需将它放在文档就绪函数中的 $.supersized() 正下方。由于您需要顶部偏移量，因此我们还必须修改顶部值。我修改了片段以满足您的需求：

var portfolioSize = function() {
  var headerOffset = 100;
  $('#supersized').css({ 
    height: $(window).height() - headerOffset,
    top: headerOffset + 'px'
  }); 
};
portfolioSize();
$(window).resize(function() { portfolioSize(); });

我将 $(window).load 事件更改为直接调用，因为我们将代码放在文档就绪函数中。

不要忘记修改 CSS 以进行定位，如另一个答案 (https://stackoverflow.com/a/12889088/860205) 中所述。

【讨论】：