Установите изображение в столбце ионной сетки. то есть 50% от общей высоты страницы

Question

.html

<ion-content class="content">
  <ion-grid>
    <ion-row class="row1">
      <ion-col size="12">
         <ion-img [src]="data?.path" class="image"></ion-img>
      </ion-col>
    </ion-row>
    <ion-row class="row2">     

    </ion-row>
  </ion-grid>
</ion-content>

.scss

.content {
    ion-grid {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .row1 {
        flex: 1;
    }
    .row2 {
        flex: 1;
    }
    ion-img {
        max-width: 100%;
        max-height: 100%;
    }
}

результат

Q: Мне нужно содержать изображение в пределах 50% уровня. Но это не работает так. Но без изображения все работает нормально. то есть он держит 50% верхнюю и нижнюю часть. Любая подсказка?

Я пробовал это:

 ion-img {
        max-width: 100%;
        max-height: 100%;
    }

Debug:

Answer 1

Элемент

Обычный ima работает ниже css.Но тот же css не работает с ion-img.Возможно, проблема с теневым домом или что-то еще.

Примечание: Если вы знаете лучшее решение, пожалуйста, поставьте его.

.html

<img [src]="data?.path" class="image" />

.scss

 .image {
        height: 250px;
        width: 340px;
    }