Question

我正在使用大量弹出窗口在点击时显示隐藏的内嵌内容。这个内容有里面的图像，有不同的大小。其中一些图像在视口中不能垂直放置。 Magnific弹出窗口可以选择将内容垂直放入视口verticalFit: true。但似乎此选项仅适用于图像画廊而不适用于内联内容。

这是一个 fiddle那个问题。

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

有一个CSS可以改变最大高度，但我认为大胆的弹出窗口会产生很多容器，其高度依赖于彼此。也许我忽略了一些东西而不是一件大事。但是现在，经过研究并没有发现任何东西，我的想法已经不多了......

Answer 1

看起来巨大弹出窗口的容器高度都只是在CSS中设置，而且就我所见，它们看起来都是100％ - 更重要的是，我没有看到JavaScript设置任何内嵌高度或宽度 - 这样可以让您的生活更轻松。

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

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

calc表达式中66px的精确计算值来自描述div（.descr）的高度，加上描述中的4个像素顶部和底部边框，再加上4个像素的顶部和底部边框image的直接父div（.image）。那个描述div的50px +边框宽度的16个总像素。

如果你愿意，你可以减少这个数额;我相信100vh - 66px尽可能大，而不需要滚动，至少在你的小提琴中给出的风格。

您可能还想添加一些样式以确保图像在容器中居中，就像这个示例中的真实高图像一样，但我会留给您。