放大彈出 - 我如何垂直放入內嵌內容？

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。