Allow defining image max-width, or reduce max-width of the whole article column

[christian-konrad]

Embedding screenshots that do cover only a small fraction of a screen often looks odd, since images auto-scale to the available width. This enlarges the text on the screenshot, which does not harmonize with the article text surrounding it.

We could solve it by allowing to define a per-image max-width, or reduce max-width of the whole article column, or learn something else from other docs with great layouts.

Current:

Proposal:

[akeller]

@pepopowitz given your recent change for images in #3154, do you have any new thoughts on this?

[pepopowitz]

1. My preference would be to leave the article column width consistent across all pages, because I think having it vary from article to article would be noticeable and jarring.
2. It makes sense to me to allow smaller width images to not stretch. We could definitely allow specification of their max-width on an individual basis; that might even be possible already. We also might even be able to accomplish something without requiring the images to specify their max-width.

In general, I'm for this change, if we have images that are looking goofy because they're stretched horizontally.

[akeller]

@mesellings do you have thoughts on this?

[mesellings]

I agree we should allow some control over image size, as some images shouldn't be full-width (as mentioned/shown here).

The only thing would be to try and keep it within CSS as much as possible, so we can adjust the UX on mobile for larger width images if need be - one approach I've used before is to create a set of CSS classes (image400, image500) etc with pre-defined max-widths, and then people can just add the relevant class onto their image.