New issue
Advanced search Search tips

Issue 707577 link

Starred by 1 user
Status: Assigned
Owner:
cbiesin...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Compat



Sign in to add a comment

[css-flex] Flexed item contains image doesn't keep aspect ratio with flex: auto and flex-wrap: wrap

Reported by utasirob...@gmail.com, Apr 2 2017 
UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36

Steps to reproduce the problem:
Testcase attached : https://jsfiddle.net/utasir/t0a1dnq1/2/

oversized images with object-fit
fixed height on parent 100px,
100% height on image (this part is good)
100% width on image (this is wrong, doesnt keep aspect ratio and cummulates the flex item as 100% of flex container instead of flex item)

What is the expected behavior?
For the expected behaviour check testcase on firefox

What went wrong?
The layout doesn't show as a horizontal stretched masonry layout

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 57.0.2987.98  Channel: canary
OS Version: 10.0
Flash Version: 

I've checked the reported issues related to flexbox, so this issue is very similar (dupe?) than others with aspect ratio but noone was with flex-wrap, so I file a separated issue for it.

Comment 1 by utasirob...@gmail.com, Apr 3 2017 

javascript workaround : https://jsfiddle.net/utasir/5uzba75x/

on body.onload event

document.querySelectorAll("#wrapper > figure > img").forEach(function(mit){
  	mit.parentNode.style.width = 
      ((100/mit.naturalHeight)*mit.naturalWidth) + 'px';
});

Comment 2 by utasirob...@gmail.com, Apr 3 2017 

more precisely the workaround is : https://jsfiddle.net/utasir/5uzba75x/1/

where the height also comes from the parent (flex-item).

Comment 3 by ajha@chromium.org, Apr 3 2017

Labels: Needs-Triage-M57

Comment 4 by durga.behera@chromium.org, Apr 3 2017

Labels: -Needs-Triage-M57 M-59 OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Thanks for the report, this is reproducible on Win 10,Ubuntu 14.04 and Mac 10.12.4 using stable 57.0.2987.133 and canary 59.0.3061.0.
Its a non-regression issue since 40.0.2190.0.

Comment 5 by e...@chromium.org, Apr 3 2017

Components: -Blink>Layout Blink>Layout>Flexbox
Labels: -Type-Bug Type-Compat
Owner: cbiesin...@chromium.org
Status: Assigned (was: Untriaged)
Over to cbiesinger for further triage.
►

Sign in to add a comment