華麗的彈出窗口 - 如何垂直放置內嵌內容？

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 ，至少在您的小提琴中給出的樣式中是這樣。

您可能還想添加一些樣式，以確保在像此示例這樣的真正高大圖像的情況下圖像在容器中居中，但我將把它留給您。

更新了小提琴。