图像大小未重新调整以适应 flexbox答案

【问题标题】：Image size not readjusting to fit within flexbox图像大小未重新调整以适应 flexbox
【发布时间】：2020-10-10 12:51:04
【问题描述】：

我正在使用max-height 作为我的图像，但它仍然不适合该部分并且超出了范围。

我已经为顶级div (90vh) 指定了一个固定大小，在它下面，我使用特定相对高度的百分比。

结构看起来像

<div id="non-responsive-div"> <!-- height:95vh -->
  <div id="top-level-container" class="three-row-grid-container"> <!-- max-height:100%; -->
    <app-status-bar id="status-bar"></app-status-bar> <!--max-height:100%; --> 
    <app-nav-component id="menu-nav" ></app-nav-component><!-- grid child --> <!--max-height:100%; --> 
    <app-content-component id="content"></app-content-component><!-- grid child --> <!--max-height:100%; --> 
  </div>
  <div>
    <app-progress-bar></app-progress-bar><!-- not a grid child -->  <!--this is positioned using absolute positioning and thus will not affect positions of others -->
    <app-dialog-box #dialogBox [dialogMessage]="" [dialogID]="'appDialog'" [dialogContext]=""></app-dialog-box>
  </div>
</div>

nav componenthtml 是

<div id="logo-nav-div" class="logo-nav-style logo-nav-grid-container"> <!--   max-height:100%; --> 
  <div id="logo-nav-left" class="logo-nav-left-flexbox-container">
    <img id="logo-image" src={{logofile}}> <!-- max-height:100%; -->
    <button type="button" (click)="onGQClick()" [ngClass]="'unselected-button'">GQ</button>
    <button type="button" (click)="onGTClick()" [ngClass]="'unselected-button'">GT</button>
    <button type="button" (click)="onPClick()" [ngClass]="'unselected-button'">P</button>
  </div>
  <div id="logo-nav-right" class="logo-nav-right-flexbox-container">
    <button type="button" (click)="onCQClick()" [ngClass]="'unselected-button'">CQ</button>
  </div>
</div>

附件是大约。提琴手。我无法上传图片 - https://jsfiddle.net/01fj8hpz/

我怀疑问题可能出在flexbox 中，就像我将图像移出flexbox 一样，图像似乎缩小了。但是我无法将flexbox 与img 内联。它位于单独的行中。

【问题讨论】：

也许我们需要查看您的 CSS。您谈到对图像使用最大宽度，但代码中的 cmets 谈到最大高度。

标签： html css flexbox flexboxgrid

【解决方案1】：

似乎诀窍是为每个子元素分配height:100%。然后设置max-height:100%似乎生效了。就我而言，我将height:100% 设置为logo-nav-div'、logo-nav-left 和logo-nav-right。这固定了它们的高度，然后max-height 生效。如果不将 height 设置为 100%，高度似乎会取其最大子元素的值。

【讨论】：