Assume:
- you have an image that is wider than the screen into which you want to add it.
- you must not allow the image to be resized to fit the width of the rendered result's screen.
- you don't want to need to specify manually the px size of any element to match the size of the original image.
- you may specify an arbitrary px size that you'd not need to update depending on new images that you might want to add to the document.
All markdown previews or outputs that I've seen automatically resize your image to fit the screen horizontally. Intellij, Ms Visual Code, Github...
I dug into the deepest recesses of the Internet and could find rare people asking about this and no answer that works for my use case.
Looks like with pure markdown it is impossible at the moment of this writing.
With HTML+CSS I can almost make it work playing with one or more of the following:
// on divs containing the image
overflow: ...;
overflow-x: ...;
width: ...;
max-width: ...;
display: ...;
// on the image
object-fit: none; // with this the image gets cropped unless you force the width of some container to be bigger than the width of the image (in px values)
float:...;
The closest that I could get is:
<style>
div.outerDivImg {
overflow: scroll;
// without this, the container grows in height and your horizontal scrollbar gets far down
// so it obligates you to scroll all the way down to be able to move the horizontal scrollbar.
max-height: 100vh;
}
div.innerDivImg {
// if you remove below, the image gets resized.
// if you remove below and put "object-fit: none;" on the img, it gets cropped to fit the screen.
width: 8000px;
}
</style>
<div class="outerDivImg">
<div class="innerDivImg">
<img class="innerImg" src='img/German-Cheatsheet.jpg'></img>
</div>
</div>
But this has the side effect of producing a horizontal bar for the div that goes further to the right than the inner image.
Cheers
