RESOLVED FIXED 169974
The sizing of images in flex should take the dimension change caused by definite cross-size and aspect-ratio
https://bugs.webkit.org/show_bug.cgi?id=169974
Summary The sizing of images in flex should take the dimension change caused by defin...
Francois Remy
Reported 2017-03-22 15:06:47 PDT
Steps to reproduce: 1. Define a width/height on a flex 2. Insert an image in it 3. Observe how its aspect-ratio affects its final size https://jsfiddle.net/zcqst2pr/ https://jsfiddle.net/zcqst2pr/1/ Did this work before? N/A Does this work in other browsers? Yes Actual results: Images do not flex as they do in Edge, which has been deemed per-spec in this case (see below). Expected results: Aspect-ratio should be preserved, except if the image is to be sized bigger than its normal size ("grow" test case). If it is, the flexing that takes place as a second step will shrink the image to fit the container. The reason flexing is different is that flex-shrink is 1 by default and flex-grow is 0 by default. Flexing doesn't have to take the image aspect-ratio into consideration, but should also refuse to shrink further than the image intrinsic size. Please discuss this issue at https://github.com/w3c/csswg-drafts/issues/1112 if you disagree with the test results
Attachments
rendering in safari, firefox, chrome (138.70 KB, image/png)
2022-12-22 18:59 PST, Karl Dubost
no flags
Radar WebKit Bug Importer
Comment 1 2022-05-24 14:55:13 PDT
Karl Dubost
Comment 2 2022-12-22 18:59:30 PST
Created attachment 464169 [details] rendering in safari, firefox, chrome That seems to be working now. https://codepen.io/webcompat/full/rNrVzMP
Karl Dubost
Comment 3 2022-12-22 19:00:45 PST
The discussion moved from https://github.com/w3c/csswg-drafts/issues/1112 to https://github.com/w3c/csswg-drafts/issues/1322 And the three browsers seem to render the same thing. I wonder if this should be closed?
Karl Dubost
Comment 4 2022-12-22 19:08:20 PST
Let's close this.
Note You need to log in before you can comment on or make changes to this bug.