放大弹出 - 我如何垂直放入内嵌内容？

Question

我正在使用大型弹出窗口来显示点击时隐藏的内联内容。这个内容里面有图片，有不同的大小。其中一些图像不适合在视口中垂直放置。 Magnific popup有一个选项可以将内容垂直放入视口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); 
} 

在计算表达的66px的精确计算值值来自描述DIV（.descr）的高度，再加4个像素中的描述的顶部和底部边界，加上4个像素的顶部和底部边界图像的直接父div（.image）。对于描述div来说，这是50px +边框宽度的总共16个像素。

如果您愿意，可以减小此数量;我相信100vh - 66px是一样大，你可以不需要滚动，至少在你的小提琴中给出的样式。

您可能还需要添加一些样式，以确保图像在容器中位于像本示例那样的真实高度图像的情况下，但是我会留给您。

Updated fiddle。