Scale figures so they look proportional

[jandermoreira]

Description

I have lots of images with variable widths to use in a book and I'd like them to look proportional.
Since some figures are really wide, I want to scale them down so they look proportional.
So far, my attempts were unsuccessful. How to get this?

Here's a MWE trying to scale the images:

---
project:
  type: book

book:
  title: My Title
  author: Me
  chapters:
    - index.qmd

format:
  html:
    theme: doc.css
---

# Intro

## Actual size
![](a.png)

## Scaled

![](a.png){.Scale}

![](ab.png){.Scale}

![](abc.png){.Scale}

![](abcd.png){.Scale}

This is the CSS file:

/*-- scss:defaults --*/

.Scale {
  transform: scale(0.25);
}

These are sample images:

[jandermoreira]

Setting fig-responsive: false seems to work...

[mcanouil]

It's really unclear what you mean by "proportional" since Quarto keep the aspect ratio, that makes not much sense.
If you want to change the width, simply set it, see https://quarto.org/docs/authoring/figures.html#figure-sizing.

fig-responsive is about rescaling the figure based on the device on which it is observed, i.e., downscale on small screen, see https://quarto.org/docs/reference/formats/html.html#figures.

[jandermoreira]

I meant related to each other. I want all A, for example, to have the same size, but if the image is large, it bicames smaller.

Here is my actual text. I want all the squares with letters to look the same size in all figures. And I want to avoid resizing every single image...

This is what I get so far:

This is what I want:

[mcanouil]

Ok, so there nothing proportional at least from the HTML/CSS perspective.
As long as you take care of generating the figures correctly and that you set their width properly, you should not have to resign on the responsive feature.