我正在使用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 component
html
是
<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
。它在单独的行中。
似乎诀窍是height:100%
为每个子元素分配。然后设置max-height:100%
似乎生效。就我而言,我设置height:100%
为logo-nav-div
'logo-nav-left
和logo-nav-right
。这样可以固定他们的身高,然后max-height
生效。如果未设置height
为100%,则高度似乎采用其最大子元素的值。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句