Flex布局中的图像未在chrome上保持宽高比

Question

所以我试图创建两行5张图像。我做了以下事情：

HTML

<div class="container">
  <div class="header">
    <!-- Some text -->
  </div>
  <div class="secondary-header">
    <!-- Some more text -->
  </div>
  <div class="top-margin" fxLayout="row wrap" fxLayoutAlign="center top">
    <img *ngFor="let i of images" [src]="i" fxFlex="20">
  </div>
</div>

CSS

.container {
  padding: 2.5% 5%;
}

.header {
    font-size: 60px;
    font-family: "Yanone Kaffeesatz";
    color: #333;
    text-align: center;
}

.secondary-header {
    font-size: 20px;
    font-family: "Yanone Kaffeesatz";
    color: #333;
    text-align: center;
}

.top-margin {
  margin-top: 2.5%;
}

此解决方案在Firefox 64上非常完美：

但是，图像在Chrome 71上具有更高的高度，从而打破了宽高比：

在this question上找不到任何解决方案。我正在使用Angular 7.1.4和Flex Layout 7.0.0-beta.22。

Answer 1

您尝试过吗：

img {
  align-self: flex-start;
}

您能否提供示例的链接？

Answer 2

我遇到了同样的问题，最终找到了一个更好的解决方案。您必须将其添加到img标签：

img {
    width: 100%;
    height: 100%;
    min-width: 0;
}

这里有完整的讨论：https://github.com/philipwalton/flexbugs/issues/225