Closed
Bug 441046
Opened 16 years ago
Closed 9 years ago
Percent max-width:100% in shrink-to-fit situation doesn't work for images
Categories
(Core :: Layout: Block and Inline, defect)
Core
Layout: Block and Inline
Tracking
()
RESOLVED
FIXED
mozilla47
People
(Reporter: marmolina666, Unassigned)
References
()
Details
(Keywords: testcase, Whiteboard: INVALID?)
Attachments
(1 file, 1 obsolete file)
(deleted),
text/html
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; es-ES; rv:1.9) Gecko/2008052906 Firefox/3.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; es-ES; rv:1.9) Gecko/2008052906 Firefox/3.0
The CSS max-width property doesn't work on images (always show original size).
That property is important to limit the size of the images because all webs with that property not working are displayed broken (images, texts, sizes,...) if they contain some big images.
Reproducible: Always
Steps to Reproduce:
1.
2.
3.
Comment 1•16 years ago
|
||
The first case (table cell) is the one used at the URL. Just included the
other two for comparison.
Comment 3•16 years ago
|
||
Table cells and floats with width:auto are "shrink-to-fit":
http://www.w3.org/TR/CSS21/visudet.html#float-width
so it's a question of how max-width:100% should be treated when
calculating the "preferred width".
AFAICT, 10.2 says it's undefined:
http://www.w3.org/TR/CSS21/visudet.html#the-width-property
"If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1."
IE8 beta renders all the images in the testcase at their intrinsic width.
Opera 9.50 shrinks the middle one, like Firefox 3.
Webkit shrinks all three.
I think Firefox 3 has the layout we want, but I'm not sure...
Component: General → Layout: Block and Inline
Keywords: testcase
OS: Windows Vista → All
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
Hardware: PC → All
Summary: max-width doesn't work for images → Percent max-width:100% in shrink-to-fit situation doesn't work for images
Whiteboard: INVALID?
Comment 5•12 years ago
|
||
Dupe of bug 434230?
Comment 6•12 years ago
|
||
That bug has a bunch of table-specific stuff, while this one is also about floats... Might be two separate issues here.
Blocks: 434230
Comment 8•9 years ago
|
||
Creates Webcompat issues with Blink
https://bugzilla.mozilla.org/show_bug.cgi?id=441046
When inspecting in blink, the computed values have an additional property which is `width`
For example when testing on Yahoo! on Mobile
https://webcompat.com/issues/1218
In the list of computed values:
# Firefox/Gecko
no with defined
max-width = 500px
# Opera/Blink and Safari/iOS
max-width = 100%
width = 320px
So we are definitely treating things differently here.
I guess if we fix that bug we might end up with solving a lot of Web Compat issues with images too wide in layouts (table layout included).
Comment 9•9 years ago
|
||
This is fixed by bug 823483
Tested in Nightly.
Status: UNCONFIRMED → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
Updated•9 years ago
|
status-firefox45:
--- → affected
status-firefox46:
--- → fixed
status-firefox47:
--- → fixed
Target Milestone: --- → mozilla47
You need to log in
before you can comment on or make changes to this bug.
Description
•