华丽的弹出窗口 - 如何垂直放置内嵌内容？

Question

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

这是这个问题的小提琴。

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

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

Answer 1

看起来 magnific popup 的容器高度都只是在 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 个像素顶部和底部边框，加上图像的直接父 div ( .image ）。 这是描述 div 的 50px + 边框宽度的 16 个总像素。

如果您愿意，您可以减少该金额； 我相信100vh - 66px是您无需滚动即可获得的最大100vh - 66px ，至少在您的小提琴中给出的样式中是这样。

您可能还想添加一些样式，以确保在像此示例这样的真正高大图像的情况下图像在容器中居中，但我将把它留给您。

更新了小提琴。