Javascript 幻灯片如何缩放视口内容？

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

然而，我似乎无法准确地理解缩放是如何工作的——我自己尝试重建时有一些恼人的怪癖，要么没有占据整个高度，要么表现出奇怪的垂直偏移：

---

我非常感谢您对我的示例缺少的内容以及DZSlides的实际工作原理进行简明的解释。

DZSlides将

主体设置为（我添加的评论）：

每个幻灯片都有，这意味着幻灯片的宽度和高度都继承自
主体

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

使用这些样式更新的对象将正确缩放

如果要缩放幻灯片元素而不是
主体
，可以对幻灯片应用相同的样式/计算（）

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     */
    ...
}