Firefox / Edge问题上的CSS：div内图像较大，div尺寸仍然较大

Question

对CSS还是陌生的，并且对我的问题进行了大量研究，所以我正在伸出援手。我确信这很简单，我很想念。

我正在构建Angular应用程序，并始终在Chrome上进行测试（不再进行测试）。我有一个带有图标的顶部菜单，并使用flexbox，它们在Chrome中的位置非常合适。在Firefox和Edge中，图像的包含div仍然很大

这里有一些图片可以更好地描述问题。

代码：

// Top Menu CSS
    :host {
      display: flex;
    }

    //app-basic-button CSS
    :host {
      display: flex;
      justify-content: center;
      align-items: center;
      .button-container{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70%;
        margin-left: 1vh;
        &:hover {
          background: $grey3;
        }
        &:active {
          background: $grey2;
        }
        img {
          height: 70%;
          z-index: 10;
          
          //mixin -> user-select:none;
          @include removeSelection(); 
          
          padding-left: 0.5vh;
          padding-right: 0.5vh;
        }
      }
    }

// Top Menu Component HTML
<div class="image-wrapper"><img [src]="this.logoSrc" alt="logo-image"></div>
<app-basic-button [imageKey]="'new-tree.png'"></app-basic-button>
... other buttons here...
    
// app-basic-button Component HTML
<div class="button-container">
<img [src]=pathToImage >
</div>

对于我的代码的任何其他注释或建议，将不胜感激。