Closed Bug 948122 Opened 11 years ago Closed 11 years ago

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

Categories

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

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: mbrubeck, Unassigned)

References

Details

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...
Fixed! Thank you!
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
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.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Updated!
Status: REOPENED → RESOLVED
Closed: 11 years ago11 years ago
Resolution: --- → FIXED
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.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
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
Status: REOPENED → RESOLVED
Closed: 11 years ago11 years ago
Resolution: --- → FIXED
Product: developer.mozilla.org → developer.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.