Option to make HTML figure width relative to original (not actual) body-width

[cod3licious]

Description

It would be great if there was an option to make the figure width in HTML documents relative to the original body-width instead of the actual current body-width to show larger figures on smaller screens.

Current behavior

![](images/elephant.png){width=60%}

-> On a large screen where the page can expand to its full default body-width (e.g., 800px), the image occupies 60% of this, i.e., its width is scaled down to 480px. That's great and the image has a reasonable size. ✅
-> On a smaller screen, where the body is scaled down to, e.g., 480px, the image is again scaled down with it and is now only 288px wide, which makes it too small to read. 😞

Desired behavior

---
# some kind of global setting
fig-width-relative-to-original: true
---
![](images/elephant.png){width=60%}

-> On large screens the behavior is the same.
-> On smaller screens, the image retains 60% of the original body-width (i.e., it is always 480px in this example) unless the screen is smaller than this, then it stays at 100% of the actual current body-width, i.e.,

actual body-width = 800px -> fig-width = 480px
actual body-width = 600px -> fig-width = 480px
actual body-width = 400px -> fig-width = 400px

This means the page would still be responsive, but the images try to keep a minimum size to make them more readable on smaller screens like phones.

[mcanouil]

You can define your own CSS rules with such criteria and add a class to your images to apply those rules for example.

[cod3licious]

Thank you, but unfortunately, I don't understand the existing quarto CSS well enough to figure out how to access what is defined as the body-width there 😔

[mcanouil]

To manage expectation, this is unlikely to be a short or even mid term priority as with most customisation requests.

Note that your favourite browser inspect/developer mode will give you all the structure information of your document you need, which is also partially described directly in https://quarto.org/docs/output-formats/html-themes.html#sass-variables or via links to Bootstrap documentation.

[mcanouil]

What do you call "original body width" exactly? Are you actually talking about the device display width? If so then look for media https://www.w3schools.com/cssref/atrule_media.php

[cod3licious]

I was talking about the body-width defined for the grid layout. For the life of me, I couldn't figure out how to do it in CSS, but adding this javascript code in footer.html and including it in the document (i.e., include-after-body: footer.html) worked.

<script type="text/javascript"> // go once over all images and transform the percentage width into pixels relative to original body size
  const bodyWidth = 800
  document.querySelectorAll('.quarto-figure img').forEach((img) => {
  const styleWidth = img.getAttribute('style').match(/width:\s*([\d.]+)%/); // Extract percentage
  if (styleWidth) {
    const percentage = parseFloat(styleWidth[1]) / 100;
    img.style.width = `${bodyWidth * percentage}px`; // Apply calculated width
  }
});
</script>

[mcanouil]

I was talking about the body-width defined for the grid layout.

The SCSS variable is described just below: https://quarto.org/docs/output-formats/page-layout.html#customizing-component-widths

Anyhow, glad you found a way that works for you!