Restrict user-inserted images to the width of their container element to avoid overflow

Description

Steps to reproduce

  1. Log in

  2. Post > New Work

  3. Fill in required fields, and in your work text, include a rather large image

  4. Post

  5. 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

Show:
Sarken
May 13, 2020, 12:41 PM

The pull request is ready to merge and can be reopened when I have fewer:

Sarken
December 5, 2020, 9:01 PM

reviewer: redsummernight

Taylor Clossin
December 11, 2020, 2:19 PM

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.

redsummernight
December 13, 2020, 12:57 PM

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.

DeployedToBeta

Assignee

Sarken

Reporter

Sarken

Roadmap

Works

Priority

Medium

Affects versions

Fix versions

Components

FrontEnd

Difficulty

Easy

Milestone

Internal 0.9