Is the default behavior to apply style="height: 0px;" to images in revealjs presentations?

[joelostblom]

Description

I have a few revealjs presentations where I reference images via the following syntax:

![The Python plotting landscape](../../../static/module1/py-plotting-landscape.png)

I have noticed that this is rendered to the following image class in the output (without any custom css applied):

<img class="r-stretch quarto-figure-center" style="height: 0px;" src="../../../static/module1/py-plotting-landscape.png" data-lazy-loaded="">

The style="height: 0px;" part makes it so that the image does not show up in the rendered slide. I noticed that the revealjs example in the quarto docs always uses an explicit height set for images. Is the default to apply a height of zero to images without an explicit height set or is something going awry on my end?

I want images to stretch the width of the slide by default, so my current workaround is to set custom on the project level to include the following, but maybe there is a simpler way to achieve this:

.reveal img {
  height: unset !important;
  max-width: 100% !important;
}

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

Also, see the Reveal.js Quarto guide especially the part about auto-stretch feature.

Note that I cannot reproduce:

---
title: "Reproducible Quarto Document"
format: revealjs
engine: markdown
---

## Slide 1

![An image]({{< placeholder 600 400 >}})

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code block (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[joelostblom]

Thanks for trying to reproduce @mcanouil. I don't see the behavior with your example either, so it must be some setting on my end then. I will report back if I figure out what the issue was.

[JosephBARBIERDARNAL]

I have the same issue here. The weird thing is that style="height: 0px;" only appears in the output of quarto render which hides the image, but not in quarto preview.

I'm not planning on making a reprex a priori, but I'll try to investigate what leads to this on my case and share it.

[JosephBARBIERDARNAL]

Still don't know why that happens, but the following CSS seems the best fix:

img.r-stretch {
  height: auto !important;
}