在四开本演示文稿中调整图像大小

Question

我知道至少还有一篇关于 Quarto 作品中图像大小的 SO 帖子，但该解决方案在这里无济于事。

我的目标是制作一个两栏幻灯片，其中长方形图像彼此重叠。这或多或少是最终目标：

问题是左列图像不适合屏幕：

我希望图像底部和屏幕底部之间有一些空白。我试过坚持

.r-fit

，

.r-strech

，

height='xx%'

的在线修改等。绝对nothing改变这个图像所在的位置。

我在here上传了一个可重现的例子。非常感谢帮助解决具体问题，但也有一些关于为什么不同的格式化工具只是偶尔会有所不同的看似神秘的原因的指示。

Answer 1

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

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

在这里，我为包含所有图像的 pandoc div 定义了一个类

.stacked-img

。完整的代表（图像链接除外！但应该适用于任何图像）如下，

---
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;
}

---