javascript - 在灵活的图像布局上水平拆分屏幕

Question

我正在寻找方向而不是任何特定的代码(至于我不会随地吐痰;))我必须为一个 friend 编写一个作品集，比如下面的第一张图片(抱歉，我要问的电脑上只有画图):

无论屏幕尺寸如何，图像都应该按比例放置并保持比例，或者根据屏幕尺寸进行排列。使屏幕始终充满，无需向任何方向滚动。

然后，如链接相册的第二张图片所示...单击开始屏幕上的图片时，我想将屏幕打开一半并显示元素的其余部分。您在第二个屏幕上看到的矩形应该与第一个屏幕中心的矩形相同，也应该是投资组合的名称。当然，我应该能够关闭它以返回到展示所有元素的页面。

我正在寻找的效果类似于这里的关于部分，但相反:

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

总结一下，

1. 如何全屏动态布局图像。
2. 如何将主屏幕分成两半并在其中显示其他内容。

我猜这里有一些关键的 javascript 可以发挥所有的魔力，因此，再一次，任何关于您知道的脚本使用的线索或 html/css 结构最适合做这类事情。这一次，我只是没有时间(再次)重新开始并遍历我的代码，试图让维多利亚时代的烟囱吹出白色的 Steam 。

Answer 1

你能创造一个http://jsfiddle.net/吗？或 http://plnkr.co/开始。如果你有一个示例网页，那么你可以只看它的来源。综上所述，

如何全屏动态布局图像。 - 不清楚那是什么意思，但是，绝对定位 + javascript如何将主屏幕分成两半并在其中显示其他内容。 - 有很多方法可以达到这种效果。在您发送的链接中，它们被中间内容重叠。图像在两侧渲染两次，中间内容分别是左右图像的右半部分和左半部分。

请发布一个 plunker 以获得其他帮助，而无需从头开始创建页面。