Figure size behavior change in 1.5. Missing img-fluid class.

[astrowonk]

Description

According to the Quarto documentation:

By default figures are displayed using their actual size (subject to the width constraints imposed by the page they are rendered within). You can change the display size by adding the width and height attributes to the figure.

And in Quarto 1.4 when I use Safari to inspect a figure created by python code, I see two classes on the img : class="img-fluid figure-img" where the img-fluid bootstrap class imposes this style of:

max-width: 100%;
height: auto;

This seems consistent with the documentation.

In Quarto 1.5, the same document when rendered the img tag created does not have theimg-fluid class, and large images appear larger than the page with horizontal scroll bars. I can restore the behavior I want by setting my own css to be:

.figure-img {
    margin-bottom: .5rem;
    line-height: 1;
    max-width: 100%;
    height: auto;
}

but I'm not sure that behavior change in 1.5 was intended?

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[astrowonk]

The textbook example is almost enough to show the issue, though any figure image, large or small, if you inspect the HTML in Quarto 1.5 you can see the img-fluid class missing. But if you make the image big enough you can see the horizontal scroll bars appear:

---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document.

```{python}
import matplotlib.pyplot as plt

x = [1, 2, 3, 4, 5]
y = [1, 4, 9, 16, 25]

plt.figure(figsize=(16, 8))
plt.plot(x, y)
plt.show()
```

[astrowonk]

here with a screenshot of the above example: