Javascript 放大弹出窗口-如何垂直放置内联内容？

我使用放大弹出显示隐藏的内联内容点击。此内容包含大小不同的图像。其中一些图像无法垂直放置在视口中。放大弹出窗口有一个选项，可以将内容垂直调整到视口

verticalFit:true

。但这个选项似乎只适用于图像库，而不适用于内联内容

这是一个 这个问题的答案

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

---

有一个CSS中的最大高度可以改变，但我认为放大弹出创建了一个高度取决于彼此的很多容器。也许我忽略了什么，这不是什么大事。但现在，在做了研究，什么也没发现之后，我的想法都没有了。

看来，放大弹出窗口的容器高度都是用CSS设置的，而且就我所见，它们似乎都是100%——更重要的是，我看不到JavaScript设置了任何内联高度或宽度，所以这让你的生活变得简单

我们可以根据您的猜测在图像上设置

max height

，并自动设置宽度。我们可以使用

vh

（viewheight）单位设置图像相对于视口高度的最大高度

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

计算表达式中66px的精确计算值来自描述div（

.descr

）的高度，加上描述上的4个像素上下边框，再加上图像的直接父div上的4个像素上下边框（

.image

）。这是描述div的50px+边框宽度的16个总像素

如果你想的话，你可以减少这个数量；我相信

100vh-66px

是你不需要滚动就能得到的最大尺寸，至少在你的小提琴中给出了样式

您可能还希望添加一些样式，以确保在像本例这样的真实高图像中，图像位于容器的中心，但我将留给您来决定

---

.

谢谢，这就回答了问题。