Image height incorrect with using multicolumn layout with revealjs

[kamransoomro84]

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

I have created a minimal repo here to demonstrate my issue.

I have two images of different sizes that I am laying out in two columns. The height of the taller image is overflowing from the page when viewed in full screen mode. I am not sure what the issue may be. I have tried several ways of setting the height but nothing works.

Ideally I would like to set the height to the slide height please.

Steps to reproduce

Clone sample repo and render.

Actual behavior

Please see description above.

Expected behavior

Please see description above.

Your environment

OS: Mac Sequoia 15.4.1
Quarto CLI

Quarto check output

Quarto 1.7.31
[✓] Checking environment information...
      Quarto cache location: /Users/k-soomro/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.85.1: OK
      Deno version 1.46.3: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.7.31
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /etc/profiles/per-user/k-soomro/bin
      Version: undefined

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge
      Source: MacOS known location

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.5
      Path: /usr/local/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

[cscheid]

This is a help request, so I'll move to discussions instead.

[mcanouil]

You need to understand how HTML/CSS works.

Reveal.js is a dynamic framework which will scale up/down the slide which means you can't set the height using percentages because none of the direct parent has an height attribute.

You can use your favourite browser to inspect your slide and tweak it as you need.

You can see the default slide dimension on Reveal.js documentation but also on Quarto documentation at: https://quarto.org/docs/presentations/revealjs/advanced.html#presentation-size

---
format: revealjs
---

## Slide 1

:::: {layout="[1,2]" layout-valign="center"}
![]({{< placeholder 600 400 >}})

![]({{< placeholder 600 1000 >}}){style="max-height:600px;"}
:::

You can also define a (S)CSS rule to make this the default for all images.
In the end, it's really about using and understanding HTML/CSS.

Note that the above is only one way to solve this.