在靈活的圖像佈局上水平分割屏幕

Question

我正在尋找方向而不是任何特定的代碼（我不會在任何特定的代碼上吐痰）） 我必須爲朋友編寫一個組合，類似於第一個圖片（對不起，我只有畫圖我與要求在計算機上）：

的圖像應該要麼設置，並能留下任何比例的屏幕尺寸或得到基於配置的屏幕尺寸。因此，屏幕總是滿的，無需向任何方向滾動。

然後，如鏈接專輯的第​​二張圖片... 單擊開始屏幕上的圖片時，我想將屏幕打開一半並顯示項目的其餘部分。您看到第二個屏幕的矩形應該與第一個屏幕的中心相同，再假定爲投資組合的名稱。當然，我應該能夠關閉它以返回展示所有項目的頁面。

我在尋找的效果類似於這裏關於部分東西，但另一種方式：

http://www.b--i--g.com/about/

綜上所述，

1. 如何動態地佈局圖像全屏（一個或多個）。
2. 如何將主屏幕分成兩半，並在其中顯示其他內容。

我猜這裏有一些關鍵javascripts做所有的魔術，所以，再次，任何導致偉大的腳本使用你知道或至少html/css結構是最適合做這種事情。 我只是沒有，這一次，重新開始多次（再次）和劃傷我的代碼試圖使維多利亞時代的煙囪吹白蒸汽的時間。

Answer 1

您能創建一個http://jsfiddle.net/或http://plnkr.co/開始。 如果你有一個示例網頁，那麼你可以看看它的來源。 總結，

如何動態佈局圖像的全屏幕（S）。 - 不清楚這意味着什麼，但絕對定位+ javascript 如何將主屏幕分成兩半，並在其中顯示其他內容。 - 有很多方法可以達到這個效果。在您發送的鏈接中，它們正被中間內容重疊。圖像分別在左側和右側圖像的兩側和中間內容右半部分和左半部分上呈現兩次。

請發佈一個plunker有其他幫助你，而無需從頭創建頁面。