Блог

Главная - Вопросы по программированию - Размер изображения не настраивается для размещения в flexbox

Размер изображения не настраивается для размещения в flexbox

#html #css #flexbox #flexboxgrid

#HTML #css #flexbox #flexboxgrid

Вопрос:

Я использую 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 . Он отображается в отдельной строке.

Комментарии:

1. Возможно, нам нужно посмотреть ваш CSS. Вы говорите об использовании максимальной ширины для изображения, но комментарии в коде говорят о максимальной высоте.

Ответ №1:

Кажется, хитрость заключается в назначении height:100% для каждого дочернего элемента. Затем настройка max-height:100% , похоже, вступает в силу. В моем случае я установил height:100% для logo-nav-div ‘, logo-nav-left и logo-nav-right . Это исправило их высоту, а затем max-height вступило в силу. Без установки height значения 100% высота, похоже, принимает значение самого большого дочернего элемента.