How to resize image in Quarto revealjs presentation

[dmkaplan2000]

I have been trying to resize an image I have placed inside a Quarto presentation and the standard method of doing so seems to have no effect on image size. Am I doing something wrong? Is there another approach?

For example, in the following presentation, the {width=10px} has no effect:

---
title: "Untitled"
format: revealjs
---

## Smaller image?

![ ](image.png){width=10px}

I have tried different units for the width (%, px, in) and with and without quotes, nothing seems to have any effect. The only thing that seems to work is putting the image inside a column. Even if that column is of width 100%, then resizing of the image works. For example, the following works fine, the image covers 50% of the screen width:

---
title: "Untitled"
format: revealjs
---

## Smaller image?

:::: {.columns}

::: {.column width="100%"}
![](images/pons.et.al.submitted.png){width="50%"}
:::

::::

But this seems like a strange solution. Is there a better way?

Thanks,
David

[mcanouil]

By default, figures are stretched, meaning the width/height are set by this feature.

See two ways to make it work.

Option 1	Option 2
--- title: "Reproducible Quarto Document" format: revealjs --- ## Introduction {.nostretch} {width="10%"}	--- title: "Reproducible Quarto Document" format: revealjs: auto-stretch: false --- ## Introduction {width="10%"}

EDIT: see https://quarto.org/docs/presentations/revealjs/advanced.html#stretch.

[dmkaplan2000]

Thanks, this clears it up for me.

[dmkaplan2000]

One thing though: Why does it work when I add a column? Wouldn't the image be stretched within the column?

[mcanouil]

Because it's no longer a "plain" figure, thus the auto-strech is not applied.

[dmkaplan2000]

Thanks!

[cderv]

For reference to anyone looking for this, doc about this revealjs stretch feature: https://quarto.org/docs/presentations/revealjs/advanced.html#stretch

[dmkaplan2000]

Thanks. The cited text would be a bit clearer if it said:

auto-stretch will only be applied to non-nested images, i.e., images that are not contained within feature blocks (e.g fragments, layout panel, columns, … ) or custom div's

Also, for things like columns it is not clear if you can opt in to auto-stretch (the text talks about custom divs, but not feature blocks).

[mcanouil]

Use the .r-stretch class as showed in the documentation.

I don't get your point about the clearer part of the documentation.
PRs are welcome.

[dmkaplan2000]

I am just suggesting that the text itself of the last part of the stretch section could be improved to enhance clarity. But I get it. Thanks for the help.