javascript - 如何在 Angular 2 中获取元素的宽度或高度？

Question

图像加载后无法获取实际宽度或高度。有谁知道如何以正确的方式做到这一点？

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);
    }
}

结果:

the console log image

Answer 1

问题解决了，因为div限制了图片的大小。

CSS

.editor-container {
  position: relative;
}

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