Magnific popup - 如何垂直放置内联内容？

Posted 2023-05-07

【中文标题】Magnific popup - 如何垂直放置内联内容？

【英文标题】：Magnific popup - How can I fit inline content vertically?

【发布时间】：2017-10-31 14:07:45

【问题描述】：

我正在使用 magnific popup 在点击时显示隐藏的内联内容。这个内容里面有图像，它们有不同的大小。其中一些图像不会垂直适合视口。 Magnific 弹出窗口可以选择将内容垂直适应视口verticalFit: true。但似乎此选项仅适用于图片库，不适用于内联内容。

这是一个 fiddle 那个问题。

我需要整个弹出窗口垂直适应视口，即使图像更大。必须有一个以像素为单位的最大宽度，但到目前为止这是有效的。

有一个可以更改 max-height 的 CSS，但我认为 magnific popup 会创建很多高度相互依赖的容器。也许我忽略了一些东西，这不是一件大事。但是现在，在研究并一无所获之后，我的想法已经不多了。

【参考方案1】：

看起来，宏伟弹出窗口的容器高度都是在 CSS 中设置的，据我所见，它们似乎都是 100%——更重要的是，我没有看到 javascript 设置任何内联高度或宽度 - 让您的生活更轻松。

我们可以像你猜的那样在图像上设置max-height，并具有自动宽度。我们可以使用vh（viewheight）单位来设置图像相对于视口高度的最大高度。

.image img 
  display: block;
  height: 100%;
  width: auto;
  max-height: calc(100vh - 66px);

calc 表达式中 66px 的精确 calc 值来自描述 div 的高度 (.descr)，加上描述的上下边框 4 像素，再加上图像直接的上下边框 4 像素父 div (.image)。这是描述 div 的 50 像素 + 边框宽度的 16 个总像素。

如果你愿意，你可以减少这个数量；我相信100vh - 66px 是尽可能大的，而无需滚动，至少在你的小提琴中给出的样式是这样。

您可能还想添加一些样式，以确保图像在容器中居中，以防像本示例这样的真实高图像，但我将由您来决定。

Updated fiddle.

【讨论】：

谢谢你，回答了这个问题。