CODEWITHSUNDEEP
javascriptangular
user15950794
user15950794

Reputation:

How to get real size of image and resized in Angular?

There is an image:

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

Html:

 <img #image class="image" />

How to get real size (width, height) and resized size after autofit by CSS?

I have tried this:

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

It returns me 500 and 0.

Upvotes: 0

Views: 1381

Answers (2)

Gabriel Sereno
Gabriel Sereno

Reputation: 855

You can try with this:

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

Upvotes: 0

Onur &#214;zkır
Onur &#214;zkır

Reputation: 555

try this :

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

in controller

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

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

Upvotes: 1

Related Questions