Определение ширины внутреннего видового экрана в reve.js - PullRequest
Новая
       19

Определение ширины внутреннего видового экрана в reve.js

0 голосов
/ 06 марта 2019

Использование pandoc для создания слайдов reve.js. Я пытаюсь приблизиться к другому дизайну слайдов, у которого изображение боковой панели занимает 20% экрана слева от окна.

А затем текст разбивается на столбцы, так что часть текста находится над левым изображением, а остальная часть текста - над правой стороной.

У меня есть решение, которое работает, если есть 50% -ое разделение, но если я использую то же решение для 20%, когда размер окна изменяется, то 20% окна не соответствует 20% области просмотра слайдов .

Что я могу использовать, чтобы определить, насколько широки слайды в reve.js? И можно ли использовать это значение для установки ширины фонового изображения?

Пример уценки pandoc (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% окна, но я бы предпочел не управлять размерами вручную и стараться держать его как можно ближе к уценке.

Спасибо

...