Image Fluid Max Height

[s2t2]

Bug description

We want to make an image responsive, and control its size.

We can set an image to have a specific height, but that makes the image no longer responsive.

We can set the image to be responsive with a max height, but the height just doesn't work.

How to make an image responsive, while setting its (maximum) height?

This question is related to #10262 which was closed without resolution.

Steps to reproduce

The image is too big:

![My Caption](../images/my-image.png)

The image size is specified, but it overflows the page on mobile (i.e. not responsive):

![My Caption](../images/my-image.png){height=350}

The image is responsive, but we lose control over its size (style not respected):

![My Caption](../images/my-image.png){.img-fluid style="max-height: 300;"}

Causes weird overlap of text in front of image:

![My Caption](../images/my-image.png){.img-fluid style="max-height: 300px;"}

So what's the right way to achieve the goal?

Expected behavior

The image should be responsive (not overflowing the page on mobile view). And it should not be larger than the specified size.

Actual behavior

We are not able to achieve a responsive image with a specified (maximum) height.

Your environment

Mac OS

Quarto check output

--->> 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.4.1
Path: /usr/local/Cellar/r/4.4.1/lib/R
LibPaths:
- /usr/local/lib/R/4.4/site-library
- /usr/local/Cellar/r/4.4.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")

[juicinate]

I recently ran into the same issue and think I solved it with this:

![My Caption](../images/my-image.png){max-height=350 width=100%}

I used this as a reference:
https://stackoverflow.com/questions/3678378/is-there-a-way-to-specify-a-max-height-or-width-for-an-image