Rescaling a figure in quarto

Question

I'm using quarto to prepare some slides (i.e., revealjs output), and I can't find a way to scale an embedded image (e.g., from Wikipedia). It seems the "width" parameters should do but neither a percentage

![](https://upload.wikimedia.org/wikipedia/commons/a/a4/Discharging_capacitor.svg){width="50%"}

nor an absolute value

![](https://upload.wikimedia.org/wikipedia/commons/a/a4/Discharging_capacitor.svg){width=600}

seems to have any effect on the rendered picture. Any clues?

Cheers.

Werra

Answer 1

Option 1: The easy solution: See here for more information.

For slides that contain only a single top-level image, the .r-stretch class is automatically applied to the image. You can disable this behavior by setting the auto-stretch: false option

format:
  revealjs:
    auto-stretch: false

Option 2:

If you like that general stretching behavior you can

A) deactivate the stretching behavior for an individual slide using

## Slide Title {.nostretch}

B) Create own css class:

The following code uses the same width (30px), but only the one with the own css style works where the trick is the !important to overwrite the default set by .r-stretch class.

.qmd

---
format: revealjs
css: styles.css
---

## using css class

![Caption](https://upload.wikimedia.org/wikipedia/commons/a/a4/Discharging_capacitor.svg){.width-image}


## using inline css does not work

![Caption](https://upload.wikimedia.org/wikipedia/commons/a/a4/Discharging_capacitor.svg){width=30px}

styles.css

.width-image{
  width: 30px!important;
}

Pervious