Question

使用pandoc来创建Reveal.js幻灯片。我正在尝试估算另一种幻灯片设计，该幻灯片的侧边栏图像从窗口左侧覆盖屏幕的20％。

然后将文本分成几列，以使文本的一部分在左侧图像上方，而其余部分在右侧上方。

如果有50％的分割，我有一个解决方案，但是如果我对20％使用相同的解决方案，则在调整窗口大小时，窗口的20％与幻灯片视口的20％不匹配

我可以使用什么来确定show.js中幻灯片的宽度？我可以使用该值设置背景图像的宽度吗？

pandoc markdown示例（cool_things.png只是红色图像）

---
title: Cool things slide
---

## {data-background-color=white data-background-image=./cool_things.png data-background-size="50vw" data-background-position="top left" }

:::::::::::::: {.columns}
::: {.column width="50%"}
### cool this works
:::
::: {.column width="50%"}

* cool things are cool
* This works correctly.
* every resize has the background image matching the column of text exactly
:::
::::::::::::::

## {data-background-color=white data-background-image=./cool_things.png data-background-size="20vw" data-background-position="top left" }

:::::::::::::: {.columns}
::: {.column width="20%"}
### not so cool
:::
::: {.column width="80%"}
* This does not handle resizes too happily
* it _can_ work, depending on the aspect ratio
* otherwise the column will not match the background image
:::
::::::::::::::

我知道如何将幻灯片宽度设置为窗口的100％，但我宁愿不手动管理调整大小，而是尝试使其尽可能接近标记。

谢谢

在Reveal.js中确定内部视口宽度

0 个答案: