css - flexbox 下 FF 和 IE11 中的最大高度和最大宽度意外行为

Question

我有一个带有 flexbox 的父元素，该元素中的一个图像带有 max-height 和 max-width。这在 Chrome (ofc) 中显示正常，但在 Firefox 上图像显示为 height:100% 和 width:100% 而在 IE 中显示为 width 远远超过 100%。

我在 codepen 上创建了一个示例.

HTML:

<div id='flex'>
  <img src='https://www.google.se/images/srpr/logo11w.png' />
</div>

CSS:

#flex {
  align-items: center;
  -webkit-align-items: center;    
  -ms-flex-align: center;
  display:block;
  display: -webkit-flex;    
  display: -ms-flexbox;
  display: flex;
  width:200px;
  height:200px;
}

img {
  max-height: 100%;
  max-width:100%;
}

如何“正常”显示带有 max-height 和 max-width 的图像(display:block; on #flex)?我需要 display:flex 这样我就可以在中心(垂直)显示图像。如果您在 codepen 上将 display 更改为 block，您将看到图像的外观。

它在 Chrome 中的样子(正确):

它在 Firefox 中的样子:

它在 IE11 中的样子:

Answer 1

如果您不介意添加一些标记，请将图像封装在另一个容器中，它可以从该容器而不是 flex 容器中获取其父级的高度和宽度。这应该可以解决 Firefox 中的问题，但我无法在 Internet Explorer 11 中为您测试它。您可能必须向新容器添加额外的宽度/高度样式，以便它在所有浏览器中工作。