在离子网格列中设置图像。即页面总高度的 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;
    }

在离子网格列中设置图像。即页面总高度的 50%

Set image within ion-grid column. i.e. 50% of total height of the page

html

css

sass

angular

ionic4