html - div 内的图像根据 Edge 上的标题长度调整大小

Question

我对 div 有疑问。它看起来像这样:

<div fxLayout="column" fxLayoutGap="20px">
  <h1 class="mat-display-1">Welcome to $TITLE$</h1>
  <img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/>
</div>

在 chrome 和 firefox 上一切正常，但在 edge 上图像会根据 h1 标签的长度调整大小。这是 CSS:

.logo {
 max-width: 300px;
 max-height: 90px;
 display: block;
 width: auto;
 height: auto;
 margin: auto;
}

和 div:

flex-direction: column;
box-sizing: border-box;
display: flex;

边缘图像是这样的:

和 Chrome :

为什么边缘使图像变大？我该如何解决？

Answer 1

在 logo 类中使用 object-fit: contain;