如何在 <ion-img> 上设置高度答案

【问题标题】：How to set height on <ion-img>如何在 <ion-img> 上设置高度
【发布时间】：2019-09-12 15:44:28
【问题描述】：

我有一个离子页面，里面有一个 ion-img：

<ion-content>
  <ion-grid>
    <ion-row class="ion-padding" align-items-center justify-content-center>
      <ion-item>
        <ion-label text-wrap class="ion-text-center">
          Servicio de reportes
        </ion-label>
      </ion-item>
    </ion-row>
    <ion-row align-items-center justify-content-center >
      <ion-button size="smaill" type="submit" expand="block" routerDirection="forward" (click)="selectSource()" >Capturar imagen</ion-button>
    </ion-row>
    <ion-row>
      <ion-col>

        <ion-img [src]="selectedImage" *ngIf="selectedImage"> </ion-img>

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

当图片设置为 selectedImage 时，它会占据整个屏幕甚至更多。我必须滚动才能看到完整的图像。

我希望图像占据屏幕的 20% 或固定高度。

我尝试在 css 中这样做：

ion-grid {
  height: 100%;

  ion-row {
    max-height: 33.33%;
  }
}

我还尝试使用 height 属性：

 <ion-img height: 10rem; [src]="selectedImage" *ngIf="selectedImage"> </ion-img>

并且图像继续占据相同的空间

我应该怎么做？感谢您的帮助。

【问题讨论】：

标签： html css image ionic-framework ionic4

【解决方案1】：

如果你减少图片高度写内联样式使用这个属性图片大小（高度）会自动减少

没有最大化图像大小的选项

【讨论】：

我试过这个：row> 但是这会将图像放在屏幕的右侧，我该如何解决这个新问题？
对图像标签使用边距属性 ex: .img{ margin:50% ; } 可能是这段代码会有所帮助