DZSlides 如何缩放视口内容

Question

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

但是，我似乎无法弄清楚缩放的确切工作原理 - 我自己重新创建代码的尝试有一些烦人的怪癖，要么不占用整个高度，要么表现出奇怪的垂直偏移：

http://jsfiddle.net/vYA8L/

如果能对我的示例缺少什么以及 DZSlides 的实际工作原理进行简明解释，我将不胜感激。

Answer 1

DZSlides将body设置为800x600并在窗口中居中（我添加的评论）：

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%和height: 100%，这意味着幻灯片从body继承了它们的宽度和高度。

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

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

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