style: Preserve aspect ratio for images in text-content

[exrok]

Style images on create pages with height: auto;, to allow the height to be automatically scaled based on width, even if an explicit height was used on the img tags.

Note: You might consider the img is wrong for adding height and width but explicit width and height attributes are helpful reduce re-layout as the image loads. Github has started adding the automatically, without this fix the width would be clamped to page, but height would be value that was specified causing image to be distorted.

Where I originally noticed the issue.

[LawnGnome]

I poked around the GitHub behaviour here. It looks like what happens there is:

• <img> without a height or width: apply max-width: 100% inline
• <img> with a height and width: apply max-width: 100%; height: auto; max-height: $HEIGHTpx; inline

I wonder if we should do that instead to better match GitHub, rather than unconditionally setting height: auto — we could do this with straight-up CSS.

@rust-lang/crates-io Does anyone else have thoughts here?

[exrok]

I think matching GitHub's behaviour seems reasonable and safe.

After a little testing the difference seems to be that if some one wanted to intentionally distort the image, height: auto alone would undo that.

Like say the image is natively 500x500, but they wrote <img width=500 height=100 .../>, then height: auto would restore the img to the full 500px height, (assuming the 500px width fit).

I'll need to take a deeper look, but expect if we go with Github's I exact approach it should be done in the markdown -> HTML, rather then just the CSS.

Edit:
I'll note, that with attr you could try do what github does in pure CSS, but that would only work chromium based browsers, as far I can tell.

I did briefly look into doing the inline style version in crates_io_markdown but it would require either enabling --cfg ammonia_unstable or an additional parsing and serialization of the HTML.