Story Format: SugarCube 2.30
So what I want is for the image to never go outside the window’s view, but to resize (contain), and when the image is narrower than the window view I want it to be centred. It seems to me that this would be the simplest thing of all, but oh well.
margin-left: 0; margin-right: 0; or
margin: auto; and
max-width: 100vw; max-height: 100vh or
object-fit: contain; in varying combinations on everything I can think of: html, body, #story, #passages, .wrap, img. But it either doesn’t contain the image in the window view, or has it all the way on the left, or has a big margin on the left (which can shove it out of the window view).
Here’s what I don’t want:
What I do want is basically what happens when you copy an image address and open it in a browser tab (at least on Chrome). When you resize the window smaller than the image, it simply resizes, staying centred.
Here’s a gif of that:
This is what I want to happen, but on Twine. I’ve tried inspecting the element and copying stuff over, but on Twine it doesn’t do the same things (as one would expect).
Anyway, I’d appreciate any help. Thanks!