Magnific popup - 如何垂直放置内联内容？
Magnific popup - How can I fit inline content vertically?
我正在使用 magnific 弹出窗口在点击时显示隐藏的内联内容。这个内容里面有图片，有不同的大小。其中一些图像无法垂直放置在视口中。 Magnific 弹出窗口有一个选项可以让内容垂直适应视口 verticalFit: true。但似乎此选项仅适用于图片库，不适用于内联内容。
这是一个
fiddle 个问题。
我需要整个弹出窗口垂直适合视口，即使图像更大也是如此。必须有一个最大宽度（以像素为单位），但到目前为止这是可行的。
有一个 CSS 可以更改最大高度，但我认为 magnific popup 会创建很多高度相互依赖的容器。也许我忽略了一些东西，这不是什么大事。但是现在，在进行了研究但一无所获之后，我 运行 失去了想法。
看起来 magnific popup 的容器高度都是在 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个像素图像直接父级的顶部和底部边框 div (.image)。描述为 50px div + 边框宽度总共 16 个像素。
如果你愿意，你可以减少这个数量；我相信 100vh - 66px 是您根本不需要滚动就可以得到的最大尺寸，至少对于 fiddle.
中给出的样式是这样的
您可能还想添加一些样式，以确保在像本例这样的真实高大图片的情况下，图片位于容器的中央，但我会把它留给您。
我正在使用 magnific 弹出窗口在点击时显示隐藏的内联内容。这个内容里面有图片，有不同的大小。其中一些图像无法垂直放置在视口中。 Magnific 弹出窗口有一个选项可以让内容垂直适应视口 verticalFit: true。但似乎此选项仅适用于图片库，不适用于内联内容。
这是一个 fiddle 个问题。
我需要整个弹出窗口垂直适合视口，即使图像更大也是如此。必须有一个最大宽度（以像素为单位），但到目前为止这是可行的。
有一个 CSS 可以更改最大高度，但我认为 magnific popup 会创建很多高度相互依赖的容器。也许我忽略了一些东西，这不是什么大事。但是现在，在进行了研究但一无所获之后，我 运行 失去了想法。
看起来 magnific popup 的容器高度都是在 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个像素图像直接父级的顶部和底部边框 div (.image)。描述为 50px div + 边框宽度总共 16 个像素。
如果你愿意，你可以减少这个数量；我相信 100vh - 66px 是您根本不需要滚动就可以得到的最大尺寸，至少对于 fiddle.
您可能还想添加一些样式，以确保在像本例这样的真实高大图片的情况下，图片位于容器的中央，但我会把它留给您。