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)
developer.mozilla.org Graveyard
Design
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...
Comment 1•11 years ago
|
||
Fixed! Thank you!
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Reporter | ||
Comment 2•11 years ago
|
||
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 → ---
Comment 3•11 years ago
|
||
Updated!
Status: REOPENED → RESOLVED
Closed: 11 years ago → 11 years ago
Resolution: --- → FIXED
Reporter | ||
Comment 4•11 years ago
|
||
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 → ---
Comment 5•11 years ago
|
||
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
Updated•11 years ago
|
Status: REOPENED → RESOLVED
Closed: 11 years ago → 11 years ago
Resolution: --- → FIXED
Updated•4 years ago
|
Product: developer.mozilla.org → developer.mozilla.org Graveyard
You need to log in
before you can comment on or make changes to this bug.
Description
•