Images should be limited to the space provided on the screen
The Problem
The current problem with images can be seen in this screenshot (I'll also demonstrate it in the comments on this issue):
This is really frustrating to use and browse through, especially when someone posts multiple screenshots in the same comment.
Solution 1
The property I initially tried is max-height: calc(100vh - 100px);
. 100vh
means 100% of the viewport, the 100px
that is removed from it is for the 100px header size (not sure if we want a variable for that, there already is a header-height
variable but it's only 50px). This way the image can be seen in full in the user's viewport. If they want to see more of the image (e.g. a higher res version) they can click it and it will open the source image in their browser.
After testing the solution above, I get something like this:
This is better, however I personally think images shouldn't be placed next to each other like this. It just looks weird to me.
Solution 2
In order to fix that implementation, I tried applying display: block
to the <a>
tags surrounding the images. This worked, but caused another problem, where the links expanded to cover the full horizontal space.
Less than ideal.
Solution 3
So, in a desperate attempt to figure out how to do this without causing other problems, I went and looked at how The Site Which Must Not Be Named did this. They used <br>
tags after every image. This works, but causes inline images to break lines after them (we'd handle this with banzai so it wouldn't effect emoji, don't worry).
Personally, I think this would be an improvement overall. I'm not a huge fan of the current way Banzai handles images next to text (I can think of nearly zero cases in which the current behavior of inline images is useful, and dozens where it's frustrating), so this isn't even really a downside for me.
Thoughts? :)