I asked a question on stack-overflow on adding a responsive image in a flex box item and haven't received a good answer yet.
If the image is one of the flex-box item, it works well - (Jsfiddle)
When the image is inside a flex item, it starts to misbehave.
Scenario 1: Image stretches distorting the aspect ratio (Jsfiddle)
Scenario 2: Image leaves empty space (Jsfiddle)
Scenario 3: The layout is good until the input receives focus, then everything breaks: Jsfiddle
This happens in IE 11, Chrome (Version 67.0.3396.87 (Official Build) (64-bit)), but haven't tested in Firefox and Edge.
Is there something i haven't studied about Flex-box, or is it a bug?
Top comments (3)
On firefox all works as expected. On Chrome it seems to be a render error because if you uncheck/check one of
imgor.funnyproperties from the inspector the image issue get fixed.Btw, since
.parenthave a fixed height (it force the aspect ratio of the image) you can't make the last image covering the space maintaining his aspect ratio without touching.funny. You can try to use object-fit cover on the last image..but it will crop the image.You can also set
.funnyto have amax-withthat match your requirements.Well, i don't know why div.funny doesn't take the width of it's contents, i prefer avoiding those and thinking differently.
You can take the img and putting as a direct child of div.parent
jsfiddle.net/ohLc5xyw/126/
I hope this work for you.
thanks. i noted that when the image is a direct flex-item, it works, until it is a child of another flex item. the latter is my requirement... i also noted that when i specify the height of the image in pixels, it works, but that is half responsive... jsfiddle.net/ohLc5xyw/100/