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

Question

我有一个离子页面，里面有一个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>

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

我该怎么做？感谢帮助。

Answer 1

我知道接受的答案可以实现请求的结果，但是使用离子标记具有延迟加载和监听加载事件ion-img等优点（ ）。ionError, ionImgDidLoad, ionImgWillLoad

我不想为了造型而失去所有标签优势。更好的方法是使用CSS 阴影部分。

ion-img 有阴影部分image，因此通过 SCSS 请求的结果将如下所示：

ion-img::part(image) {
  width: 50%; /* or whatever value */
  /* you can set the height value too */
}

Answer 2

如果 u 降低图像高度写入内联样式< img src="" style="width:50%" >使用此属性图像大小(高度)会自动降低

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