How to get element width or height in Angular 2?

Question

I can't get the real width or height after image loaded. Does anyone know how to do it in the correct way?

HTML:

<div class="editor-container">
    <img src="{{photoUrl}}" alt="" />
</div>

CSS:

.editor-container {
  position: relative;
  width: 100%;
}

.editor-container img {
  display: block;
  width: 100%;
  height: auto;
}

TypeScript:

ngAfterViewInit(){
    try {
        console.log( document.getElementsByClassName('editor-container') );
        console.log( document.getElementsByClassName('editor-container')[0] );
        console.log( 'clientWidth', document.getElementsByClassName('editor-container')[0].clientWidth );
        console.log( 'scrollWidth', document.getElementsByClassName('editor-container')[0].scrollWidth );
    } catch (err) {
        console.error(err);
    }
}

result:

the console log image

Do you mean the actual width as in what size the image is set to? Because the current way it's set right now there's a div that limits the size of your image. — Mike Tung
– Mike Tung, Commented May 4, 2017 at 3:20
@MikeTung Thanks for response! I remove 'width: 100%;' in the .editor-container style, then it works now. — Conan06
– Conan06, Commented May 4, 2017 at 3:26
I was trying to set the image width. I ended up using your suggested .scrollWidth into a variable, and then <img src="" width="{{maxWidth}}" /> Thanks — MarAvFe
– MarAvFe, Commented Aug 16, 2018 at 7:09

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

The problem was solved because the div was limiting the size of the picture.

CSS

.editor-container {
  position: relative;
}

.editor-container img {
  display: block;
  height: auto;
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 4, 2017 at 3:28

Mike Tung

4,8411 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get element width or height in Angular 2?

1 Answer 1

CSS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

CSS

Comments

Your Answer

Sign up or log in

Post as a guest

Related