jupyter-book
jupyter-book copied to clipboard
executablebooks
Image ratios not maintained on small screens
Describe the bug
context
When I view a page with an image on mobile (and the image has a height property set).
expectation I expect the image to be scaled in both dimensions such that the image ratio is maintained.
bug But instead, the height value is maintained, distorting the image ratio. See screenshots of the issue here: https://github.com/alan-turing-institute/the-turing-way/issues/2310#issue-1182200758
I tried the solution of removing all of our height tags, but that makes some images very large on desktop (see final screenshot here: https://github.com/alan-turing-institute/the-turing-way/pull/2311#issuecomment-1083475868).
Ideally, I would like a 'max height' tag, or for the default behavior to be to maintain aspect ratios. I'm very much welcome to alternative suggestions. The ~~boring~~ hacky solution is to only use height tags for portrait orientation images and accept that they might get slightly distorted on mobile. Or I imagine we could use the scale attribute instead of the height one and that might work. But it would be preferable to be able to set all images to a standard configuration, rather than have to either: set height depending on orientation, or calculate scale manually per image.
Reproduce the bug
See above screenshots
List your environment
No response
thanks @da5nsy for documenting this issue on mobile
@choldgraf I get a sense this issue might reside with sphinx-book-theme, as it seems to be related to the mobile view of the html. Perhaps I can transfer that issue to that repo. Do you agree?
Yes I agree that the theme is probably the place for a change. Though I'm not sure exactly what CSS would fix this - image ratios always confuse the heck out of me. @da5nsy have you found CSS that fixed this?
Looks like object-fit: scale-down is what is needed. I think this would make a sensible default, but there may be examples where it is not, that I'm not thinking of.