在离子栅栏内设置图像。即页面总高度的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%;
    }
}

结果

问：：我需要将图像包含在50%级内。但这不是那样的。但是没有图像，它可以正常工作。也就是说，它保持50%的顶部和底部。有任何线索吗？

我尝试过：

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

调试：

Answer 1

纯ima元素适用于css以下的元素。但是相同的css不能与ion-img一起使用。也许是dom影子问题或其他问题。

注意：如果您知道更好的解决方案，请提出来。

.html

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

.scss

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