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高。

响应式环球免税店

3 个答案: