DZSlides如何缩放视口内容？

Question

我喜欢DZSlides如何使用像素尺寸并将它们缩放到视口大小，因为它为演示提供了一些很好的可预测性（虽然我不想在常规网站上使用它）。

然而，我似乎无法弄清楚缩放是如何工作的 - 我自己尝试重新创建the code有一些恼人的怪癖，要么不占用整个高度，要么表现出奇怪的垂直偏移：

http://jsfiddle.net/vYA8L/

我很感激能够简要解释我的例子，以及DZSlides的实际工作方式。

Answer 1

DZSlides将body设为800x600 and centered in window（由我添加评论）：

body {
    width: 800px; height: 600px;
    margin-left: -400px; margin-top: -300px;  /* these two lines center */
    position: absolute; top: 50%; left: 50%;  /* body in the window     */
    ...
}

并且每张幻灯片都有width: 100% and height: 100%，这意味着幻灯片会从body继承其宽度和高度。

JavaScript代码实际上缩放body以适合窗口，因此通过扩展，每张幻灯片都可以缩放以适应。

使用这些样式更新的jsFiddle将正确缩放。

如果要缩放幻灯片元素而不是body，可以将相同的样式/计算应用于幻灯片（demo）。