R语言 在夸托演示中调整图像大小

wn9m85ua  于 2023-04-27  发布在  其他
关注(0)|答案(1)|浏览(132)

我知道至少还有一个关于夸托制作中图像大小的SO帖子,但是这个解决方案在这里没有用。
我的目标是制作一张两栏的幻灯片,长长的矩形图片相互重叠。这或多或少是我的最终目标:

问题是左栏图像无法显示在屏幕上:

我想有一些图像的底部和屏幕底部之间的空白。我已经尝试坚持.r-fit.r-strechheight='xx%'的在线修改等绝对 * 没有 * 改变这个图像的位置。
我上传了一个可复制的例子here。非常感谢对具体问题的帮助,但也有关于不同格式工具偶尔会产生差异的看似神秘的原因的指针。

0vvn1miw

0vvn1miw1#

添加一些底部边距,并降低图像的高度。

.stacked-img img {
  margin-bottom: 8em;
  height: 85vh;
}

在这里,我为pandoc div定义了一个类.stacked-img来 Package 所有的图像。完整的reprex(除了图像链接!但应该适用于任何图像)如下所示:

---
title: "Stacked"
format: 
  revealjs:
    css: logo.css
editor: source
---

## First Slide

::::{.stacked-img layout-ncol=2}

::: {.r-stack}

![](statehouse.jpg){.fragment}

::: rotate-img-3
![](grumbach.png){.fragment}
:::

::: rotate-img-354
![](increasingly.jpg){.fragment}
:::

::: rotate-img-9
![](red_state.jpg){.fragment}
:::

::: rotate-img-348
![](dynamic_dem.jpg){.fragment}
:::
:::

::: {.r-stack}

![](538_1.png){.fragment}

::: rotate-img-3
![](538_2.png){.fragment}
:::

::: rotate-img-354
![](538_3.png){.fragment}
:::

::: rotate-img-9
![](538_4.png){.fragment}
:::

:::

::::

logo.css

.rotate-img-3 img {
  transform: rotate(3deg);
}

.rotate-img-9 img {
  transform: rotate(9deg);
}

.rotate-img-354 img {
  transform: rotate(354deg);
}

.rotate-img-348 img {
  transform: rotate(348deg);
}

.stacked-img img {
  margin-bottom: 8em;
  height: 85vh;
}

相关问题