Question

Supersized slideshow拉伸幻灯片图片以填充屏幕。然而，我希望在幻灯片放映之前有一个100px标题（而不是它）。我该怎么办？

The FAQ explains that the slideshow needs not to be fullscreen，但我仍然希望它是全屏的，期望从顶部100px。

Answer 1

我知道自从你提问以来已经有点了，但我已经用它来缩小Supersized占用的空间。

function portfolioSize () {
    $('#supersized').height( $(window).height() - 71 );
}
$(window).load(function() { portfolioSize(); });
$(window).resize(function() { portfolioSize(); });

这会拉高窗口高度并减去必要数量的像素。下面的两行用于确保在初始加载时以及在调整浏览器窗口大小时应用该功能。

编辑：作为旁注，我相信也可能需要以下CSS（因为我已经在需要这个的网站上工作了一段时间，所以这些可能出于其他原因）：

#supersized {position: relative !important;}

#supersized li {position: absolute !important; height: 100% !important;}

Answer 2

简单 - 只需将其添加到CSS：

#supersized li {top:100px !important}

然后使用绝对定位将标题添加到屏幕顶部：）

Answer 3

您可以使用div和display: block创建容器或margin-top: 100px，并在其中设置幻灯片。或者，您可以尝试为幻灯片显示父选择器分配margin-top: 100px或top: 100px。（也就是说，如果您使用ul或幻灯片的某个父容器，您可以将其提供给li。

您甚至可以尝试padding-top或border-top并为其分配100px。你有很多选择。

我建议您使用流体布局。 Here 是一个现场演示。

如何从Supersized全屏幻灯片中获取100px？

3 个答案: