Restrict user-inserted images to the width of their container element to avoid overflow
Description
Steps to reproduce
Log in
Post > New Work
Fill in required fields, and in your work text, include a rather large image
Post
On a screen that is not as big as your image, view the work
What happens
The image is too wide to fit on the screen. It scrolls sideways. Meh.
What should happen instead
The image should have a maximum width of 100% of the container size. (Note that the container isn't the same width as the screen.
Notes
This needs an announcement first, which is in progress.
Testing notes
Test on images that have width and height attributes set, just width, and just height.
This will apply to any user- (or admin-) inserted images, so it wouldn't hurt to test large images in comments or admin posts as well.
Activity
The pull request is ready to merge and can be reopened when I have fewer:
reviewer: redsummernight
Tested on a post and comment with width, height, and both. All instances looked good. The image always sized down so I could see the whole image on the screen no matter how small.
Tested images with one/both/none of width and height attributes set:
The height attribute never matters: the image height is always whatever necessary to maintain aspect ratio with its width.
The image width is always the minimum of: the width attribute (if set), the image’s actual width, and the container width.
Tested on a work and a comment: https://test.archiveofourown.org/works/1072553/
Tested on an admin post: https://test.archiveofourown.org/admin_posts/761
Looks good.
