在離子柵欄內設置圖像。 即頁面總高度的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

Plain ima元素適用於css以下。 但是，相同的css不適用於ion-img 。 可能是dom影子問題或其他問題。

注意：如果您知道更好的解決方案，請提出來。

html的

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

.scss

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