javascript - 响应式画廊

Question

我正在尝试在其响应模式下使用此插件Galleria，这基本上意味着它将根据其容器大小在窗口重新调整大小时重新绘制自己。我提供的链接上的演示显示了一个非常好的示例。您可以看到，当您调整窗口大小时，整个画廊也会相应调整。现在我的问题是，除非为用作容器的 DOM 元素指定了高度，否则插件不会让我初始化图库。这意味着，我不得不编写大量的 javascript 代码来响应窗口调整大小 - 它相当多地破坏了它具有响应模式的意义 - 但是在上面的网站中，我找不到明确的高度指定。有人可以向我解释我要去哪里错了吗？

Answer 1

我自己想通了。发布我的答案-

初始化图库时 - 以百分比指定您的高度 - 如下所示。我猜在这种情况下它需要 50% 的窗口高度作为它的值。这样，您无需在任何地方明确指定高度，它就可以像宣传的那样工作

Galleria.run('#gallery', {responsive:true, height:0.5, debug:false});

Answer 2

Galleria 需要一个高度才能正确初始化。您可以通过 CSS 或 JS 执行此操作。

如果您希望它填充屏幕的宽度和高度，我建议您通过 CSS 将宽度和高度设置为 100%。并且它的父容器需要是 100%。见下文。

**JS:**
Galleria.run('#galleria', {
  responsive:true,
  showCounter:true,
  thumbnails:false,
  trueFullscreen:true,
});

**CSS:**
#galleria{
  width:100%;
  height: 100%;
  position: fixed;
  z-index: 9999;
  top:0px;
  bottom: 0px;
}
body,html{
   height:100%;
   width:100%;
}

Answer 3

高度选项（如果它 < 2.0）是相对于容器的宽度的。所以height:0.5会有一个高度是容器宽度的一半（w = 2，h = 1）。

height:1.5将导致 (w=2, h=3)

为了保持响应，您可以使用max-width而不是width在为容器设置样式时使用。

如果 height 选项设置为 2.0 或更高，则将其解释为像素。所以height:2.0只有 2px 高。