javascript - DZSlides 如何缩放视口(viewport)内容？

Question

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

但是，我似乎无法弄清楚缩放到底是如何工作的——我自己尝试重新创建 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)。