amp-img with layout responsive doesn't work in flexbox

[cathyxz]

Repros in Chrome here: https://codepen.io/cathyxz/pen/wZgQqY?editors=1100

Basically today @kristoferbaxter discovered that when you have:

#container {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

and

  <div id="container">
    <amp-img src="http://placekitten.com/300/300" 
             width="300" 
             height="300" 
             layout="responsive">
    </amp-img>
  </div>

in AMP, the <amp-img> does not display. =(

It turns out that the dimensions of both the <amp-img> and the sizer are 0x0, and therefore the <img> tag is not rendered because the layoutCallback is not called.

This does work with layout="intrinsic" though, and layout="responsive" will work correctly as intended if we set the flex-basis property on the <amp-img>. But not out of the box. Since this is a commonly used pattern for centering images, it seems like we should document this behaviour and workarounds at least.

[meistudioli]

Hi, @cathyxz

I just fire an issue about amp-img doen't init. Just wondering is it same with your case ?

issue: #25789

Paul

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[vinoddhanda]

You can use "Flex:1" its work for me
#container {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
flex:1;
}