Resizing Images in Quarto Presentation

Question

I'm aware that there's at least one other SO post about the size of images in Quarto productions, but that solution is of no avail here.

My goal is to have a two-column slide where long rectangular images lay atop each other. This is more or less what the end goal is:

The issue is that the left-column images won't fit on the screen:

I'd like there to be some whitespace between the bottom of the image and bottom of the screen. I've tried stick .r-fit, .r-strech, in-line modifications of height='xx%', etc. Absolutely nothing changes the where this image is located.

I've uploaded a reproducible example here. Help with the specific issue is much appreciated, but also are pointers about the seemingly mysterious reasons why different formatting tools make a difference only occasionally.

Answer 1

Add some bottom margin and reduce the height a bit for images.

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

Here I have defined a class .stacked-img for the pandoc divs wrapping all the images. Full reprex (except the images links! but should work for any images) as follows,

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

---