Consider zooming images with a horizontal fit + scrolling support

Problem

First of all, thanks a lot for the zoomable image feature of mdbook v0.5.4! It allowed me to remove heaps of the annoying <a href='foobar.png' target='_blank'><img src='foobar.png' /></a> pattern from some of my static sites.

However, I noticed that it does not work so well with images that have a very tall aspect ratio designed to be scrolled through, as it adjusts them to the browser window height which can make them excessively narrow.

Here's an example of the kind of image that I am talking about: https://grasland.pages.in2p3.fr/tp-perf/perf-script/perf_script_call_trace_main.png...

Notice how it does not look good with the CSS zoom that was introduced in mdbook v0.5.4:

Proposed Solution

My former "open in new tab" solution handles this kind of images better because the web browser starts with a vertical image fit but let you switch to a horizontal fit by clicking on the image. The reader can then scroll to see the whole content, then close the tab once done.

With the current mdbook zoomable image UX, a second click wouldn't work as 1/double clicking is annoying and 2/the interaction of clicking on a zoomed image is already used to un-zoom the image.

What I think could work however, is to adjust the CSS so that images have a horizontal fit only and can be scrolled by the user as needed. But I'm not proficient enough with CSS to tell if this is actually doable without javascript or not.

Notes

No response

Start by tracing the CSS zoomable-image behavior introduced in mdBook v0.5.4 and identify the styles controlling image fitting and scrolling. Test with a very tall image like the linked example. Done means tall images use a horizontal fit, remain scrollable, and preserve the existing zoom and un-zoom interaction.