DZSlides如何縮放視口內容？

Question

我喜歡DZSlides如何使用像素尺寸並將它們縮放到視口尺寸，因爲它爲演示文稿提供了一些很好的可預測性（儘管我不想在常規網站上使用它）。

不過，我似乎無法弄清楚比例是怎麼工作的 - 我自己嘗試重新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）。