2

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

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

http://jsfiddle.net/vYA8L/

对于我的示例缺少的内容以及 DZSlides 的实际工作原理，我将不胜感激。

4

1 回答 1

5

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，可以将相同的样式/计算应用于幻灯片（演示）。

于 2012-06-20T11:17:15.273 回答