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,可以将相同的样式/计算应用于幻灯片(演示).