在一個花式框內豎直放置圖像+文字

Question

我試圖在文字的上方和下方顯示一個垂直的高分辨率圖像，內部有一個小的fancyBox。

我無法預先知道fancyBox會有多大：fancyBox會自動調整大小以適應客戶端視口。

最終結果應該是圖像按比例重新調整大小以適應可用區域，爲文本留出足夠的空間。換句話說：我需要整個事情「首屏」（文字+圖片）：

的問題是：我堅持和寬度是確定的，高度不等我有一個垂直滾動條：

我的例子是在這裏：http://jsfiddle.net/sexyzane/wv05f8ez/4/但代碼的相關部分是CSS：

#viewbox > img { 
    width: auto; 
    height: auto; 
    max-height: 100%; 
    max-width: 100%; 
} 

我想我的基本知識幾乎是正確的（如果我刪除max-width規則，我也會得到一個水平滾動條，但是，仍然，max-height似乎被忽略了（在我的jsfiddle中設置爲5 ％，但將其設置爲50％或500％似乎無關緊要）。

無Javascript解決方案的額外榮譽。

謝謝！

Answer 1

你應該試試bootstrap。

http://getbootstrap.com/javascript/#modals-examples

Answer 2

您需要添加CSS爲你父母圖像

div#viewbox { 
    display: block; 
    height: 96%; 
    position: relative; 
    width: 100%; 
} 

然後添加對象的配合：蓋;這裏屬性的圖像，使圖像分辨率始終將保持

#viewbox > img { 
    width: auto; 
    height: auto; 
    max-height:35%; 
    max-width: 100%; 
object-fit: cover; 
} 

的是，我已經在http://jsfiddle.net/wv05f8ez/5/工作，我希望這是你在找什麼的鏈接。