Large Images Not Displayed in Reveal.js Presentations on Mobile View

[danielvartan]

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

When rendering a Quarto document as a Reveal.js presentation, large images do not appear in mobile view, although they display correctly in desktop view.

Desktop View:

Mobile view:

Steps to reproduce

1. Create a Quarto Reveal.js presentation with large images
2. View the presentation on a mobile device or in mobile viewport mode
3. Navigate to slides containing stretched images

I've created a minimal reproducible example demonstrating this issue:

• Source code: https://github.com/danielvartan/test/tree/quarto-2
• Live demo (GitHub Pages): https://danielvartan.github.io/test

Actual behavior

Large/stretched images fail to render in mobile view.

Expected behavior

All slide content, including stretched images, should display correctly across all device types and screen sizes.

Your environment

Desktop:

• Quarto v1.8.27
• Positron Version: 2026.01.0 build 147
• Code - OSS Version: 1.106.0
• Commit: 3290136f699527bf01b703b390457b05ef2b858a
• Date: 2026-01-06T01:43:52.838Z
• Electron: 37.7.0
• Chromium: 138.0.7204.251
• Node.js: 22.20.0
• V8: 13.8.258.32-electron.0
• OS: Linux x64 6.18.2-arch2-1

Mobile:

• OS: Android 10
• Browsers tested: Firefox v148.0b4 (build #2016138863), Chrome v144.0.7559.76
• Result: Issue reproduces in both browsers

Quarto check output

 > quarto check
Quarto 1.8.27
[✓] Checking environment information...
      Quarto cache location: /home/danielvartan/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.3.1: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.8.27
      Path: /opt/quarto/bin

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

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /usr/bin
      Version: undefined

[✓] Checking Chrome Headless....................OK
      Chrome:  (not detected)

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

[✓] Checking Python 3 installation....OK
      Version: 3.13.11
      Path: /usr/bin/python3
      Jupyter: 5.9.1
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.5.2
      Path: /usr/lib64/R
      LibPaths:
        - /home/danielvartan/R/x86_64-pc-linux-gnu-library/4.5
        - /usr/lib/R/library
      knitr: 1.51
      rmarkdown: 2.30

[✓] Checking Knitr engine render......OK

[mcanouil]

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[danielvartan]

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

Done.

[mcanouil]

It seems to be a breakpoint issue at 483px wide.

[mcanouil]

Actually, that's not the issue.
The disappearance is caused by Reveal.js's dynamic height calculation for the r-stretch class automatically added by default (https://quarto.org/docs/presentations/revealjs/#content-overflow).

What is happening:

1. The presentation is configured with dimensions 1050x700 pixels and a 10% margin.
2. At 483px viewport width, Reveal.js applies a scale factor of approximately 0.41.
3. The scaled slide height becomes roughly 287px.
4. The r-stretch class calculates remaining vertical space after the <h2> header.
5. At this scale, the remaining space becomes zero or negative.
6. The image height is set to 0, making it invisible.

Solutions:

• Remove r-stretch by using .nostretch.
• Add custom CSS with a minimum height for stretched images.
• Adjust the base presentation dimensions to scale better on mobile devices.

[danielvartan]

I see, so it's a scaling issue with Reveal.js.

Thank you for your assessment and suggestions.

From a user perspective, having to add workarounds like this (which can accumulate) undermines Quarto's usefulness. I suggest adding some form of pre- or post-processing to resolve this issue while Reveal.js behave in this way.

[danielvartan]

Your suggestion worked. Thank you!

Here it is for future reference:

![](images/big-image.png){.nostretch style="max-width: 100%; height: auto;"}

It can also be seen at: https://github.com/danielvartan/test/tree/quarto-3