948122 - [MDN redesign] wide images are squashed (have wrong aspect ratio)

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Matt Brubeck (:mbrubeck)]

In the new MDN theme, wide images are resized incorrectly.  For example, on this page:
https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Metro

There is the following image tag, which was generated by the WYSIWYG editor:
<img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="width: 940px; height: 361px;">

The image appears with the wrong aspect ratio because redesign-main-min.css sets "max-width: 100%" but leaves the height unchanged.

This could be fixed by overriding the height with "height: auto !important", though this could break any images that deliberately set a non-intrinsic aspect ratio, and defeats the purpose of specifying width and height in the markup...

Comment 1

[David Walsh :davidwalsh]

Fixed!  Thank you!

Comment 2

[Matt Brubeck (:mbrubeck)]

It looks like you edited the one page given as an example in comment 0, but the underlying bug still exists, and still affects other pages with wide images, like this one which has the same image as the previous example:
https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Thunderbird

More importantly, it affects any new more-than-680px-wide images that are added using the built-in editing tools, which automatically add style="width: xxx; height: yyy;" to the generated IMG elements.

Reopening this bug because I think we should fix this bug in the editor and/or the stylesheet.

Comment 3

[David Walsh :davidwalsh]

Updated!

Comment 4

[Matt Brubeck (:mbrubeck)]

Sorry, reopening for the reason given in comment 2.  This is not a bug about any specific page(s), the bug is that the editor is generating markup with styles that conflict with the redesign stylesheet.

Steps to reproduce:
1) On any page, attach an image file that is 700px or wider.
2) Click the "Insert image" button in the editing toolbar.
3) Choose the attachment created in step 1.
4) Press "OK" to insert the image.
5) Save your changes.

Expected results: The height and width of the image are scaled by the same amount.

Actual results: The displayed image is scaled horizontally but not vertically (it has a reduced width but not a reduced height), as explained in comment 0.

Comment 5

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/ffcb9dd4c17664b5be9fbf340c222fff4ea4d4fe
fix bug 948122 - Contrain image heights to max width

https://github.com/mozilla/kuma/commit/843915b6b6bf85618ff5ec5d06658317e3bdbdcc
Merge pull request #1757 from darkwing/height-auto

fix bug 948122 - Contrain image heights to max width