如何在 Angular 中獲取圖像的實際大小並調整大小？

Question

有一張圖：

@ViewChild('image')
readonly image: ElementRef;

Html：

 <img #image class="image" />

CSS自動調整后如何獲得實際尺寸（寬度，高度）和調整大小？

我試過這個：

  console.log(this.container.nativeElement.clientHeight);
  console.log(this.container.nativeElement.clientWidth);

它返回我 500 和 0。

Answer 1

嘗試這個：

<img #image src="images/path" class="image" (load)="onLoad()" />

在 controller

onLoad() {
  console.log((this.image.nativeElement as HTMLImageElement).width);
  console.log((this.image.nativeElement as HTMLImageElement).height);
}

演示： https://stackblitz.com/edit/angular-rqceml?file=src/app/app.component.ts

Answer 2

你可以試試這個：

 console.log((this.container.nativeElement as HTMLImageElement).naturalWidth); console.log((this.container.nativeElement as HTMLImageElement).naturalHeight);