flex 布局中的图像未在 chrome 上保持纵横比

Posted 2023-03-07

【中文标题】flex 布局中的图像未在 chrome 上保持纵横比

【英文标题】：Images in flex layout not keeping aspect ratio on chrome

【发布时间】：2019-05-30 08:19:37

【问题描述】：

所以我正在尝试创建两行 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。

【参考方案1】：

你试过了吗：

img 
  align-self: flex-start;

您能否提供一个示例的链接？

【参考方案2】：

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

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

这是一个完整的讨论：https://github.com/philipwalton/flexbugs/issues/225