Specifying figure width as html percentages in quarto yaml

Question

I'm trying to set the HTML figure width for a whole project, 60% of the page width, I'm trying:

---
format:
  html:
    default-image-extension: png
    fig-width: "60%"
---

![something](images/test_image)

but it gives the error:

x The value "60%" is of type string.
i The error happened in location format:html:fig-width.

changing this to 0.5 doesn't bring up an error, but the figures remain the same size. I can change figures individually, but would like a blanket YAML statement

Answer 1

As I have already commented, fig-width can only take values in numeric. So to set figure width in percentage unit, another option could be using out-width which can take values in different units (px, cm, mm, in, inch and %). But it seems specifying out-width does not work from the yaml. So you can use the knitr option out.width (note the . in between instead of -) to set the global figure width for images generated from code chunks.

But this out.width will not affect the markdown images and for that you may use css.

---
title: Specifying fig width in percentage unit
format:
  html: 
    default-image-extension: png
knitr:
  opts_chunk:
    out.width: "60%"
---

## Plot

```{r}
plot(rnorm(1000))
```

## Markdown Images

![A cute Dog](dog.jpg)

```{css, echo=FALSE}
img.figure-img {
  width: 60%;
}
```