Using image height makes image no longer responsive

[s2t2]

Bug description

When specifying image height, it makes the image no longer responsive.

Steps to reproduce

![Binary logic (ones and zeros)](../../../images/binary-logic.png){height=350}

Expected behavior

Resize the window or view on mobile, and see the image exhibit the same responsive behavior as if not using the height property.

Actual behavior

Resize the window or view on mobile, and see the image overflows the page.

Your environment

Mac OS

Quarto check output

(quarto-env) --->> quarto check Quarto 1.4.554 [✓] Checking versions of quarto binary dependencies... Pandoc version 3.1.11: OK Dart Sass version 1.69.5: OK Deno version 1.37.2: OK [✓] Checking versions of quarto dependencies......OK [✓] Checking Quarto installation......OK Version: 1.4.554 Path: /Applications/quarto/bin

[✓] Checking tools....................OK TinyTeX: (not installed) Chromium: (not installed)

[✓] Checking LaTeX....................OK Using: Installation From Path Path: /usr/local/bin Version: undefined

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK Version: 3.11.9 (Conda) Path: /opt/anaconda3/envs/quarto-env/bin/python Jupyter: 5.7.2 Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK Version: 4.3.1 Path: /usr/local/Cellar/r/4.3.1/lib/R LibPaths:

• /usr/local/lib/R/4.3/site-library

• /usr/local/Cellar/r/4.3.1/lib/R/library knitr: (None) rmarkdown: (None)

  The knitr package is not available in this R installation. Install with install.packages("knitr") The rmarkdown package is not available in this R installation. Install with install.packages("rmarkdown")

[mcanouil]

That's because the rule is:

.img-fluid {
    max-width: 100%;
    height: auto;
}

And because you set an absolute height. If you want image to be responsive, use relative size not absolute.

This is independent of Quarto, that's HTML/CSS rule.

https://www.w3schools.com/howto/howto_css_image_responsive.asp

[s2t2]

So what does the corresponding updated quarto markdown need to be?

Sounds like maybe:

![Binary logic (ones and zeros)](../../../images/binary-logic.png){.img-fluid style="max-height:350;"}

Why don't we add this example to the documentation? Let me know where the most preferable place is, and I would be happy to send a PR.