Closed Bug 441046 Opened 16 years ago Closed 8 years ago

Percent max-width:100% in shrink-to-fit situation doesn't work for images

Categories

(Core :: Layout: Block and Inline, defect)

defect
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla47
Tracking Status
firefox45 --- affected
firefox46 --- fixed
firefox47 --- fixed

People

(Reporter: marmolina666, Unassigned)

References

()

Details

(Keywords: testcase, Whiteboard: INVALID?)

Attachments

(1 file, 1 obsolete file)

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.
Attached file Testcase #1 (obsolete) —
The first case (table cell) is the one used at the URL.  Just included the
other two for comparison.
Attached file Testcase #1
(correcting a typo)
Attachment #326127 - Attachment is obsolete: true
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?
Dupe of bug 434230?
That bug has a bunch of table-specific stuff, while this one is also about floats...  Might be two separate issues here.
Blocks: 434230
Depends on: 823483
Blocks: 980432
Blocks: 1023118
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).
This is fixed by bug 823483
Tested in Nightly.
Status: UNCONFIRMED → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: