Как получить точную высоту элемента, для которого атрибут css установлен в auto автоматически?

Question

Я использую Reactjs и хочу получить высоту элемента img, я хочу сохранить соотношение img, поэтому я устанавливаю изображение в css следующим образом.

.img {
  position: fixed;
  z-index: 999;
  width: 30%;
  height: auto;
  left: 5%;
  object-fit: fill;
}

Обратите внимание, что здесь высота равна "auto".

Теперь я просто пытаюсь получить высоту визуализации в componentDidMount () следующим образом:

componentDidMount() {
    const height = document.getElementById('ImgID').clientHeight;
    const width = document.getElementById('ImgID').clientWidth;
    console.log(height, width)
}

Я проверяю просто напечататьрезультат в консоли, но журнал показывает, что высота равна 0, а ширина равна 252 (явная ширина).

Дело в том, что изображение появилось на экране, а его высота визуально не равна 0. Затем я попытался вручную проверить атрибут clientHeight с помощьюпечать:

console.log(document.getElementById('ImgID').attributes)

Расширяя 'style> ownerElement> clientHeight', я вижу, что высота клиента равна 49, что не равно нулю, но я просто не могу получить это правильное значение: /.

Я ищу решение, чтобы получить высоту в этой ситуации, это можно сделать с помощью Javascript / CSS или обоих.Я пытался избежать JQuery, потому что React использует виртуальный DOM, а не браузер DOM.

------------------- update --------------------

вот что я получил с getBoundingClientRect (), предложенным ответом от @ ııı

Answer 1

Это на самом деле потому, что изображение еще не загружено при выполнении componentDidMount().<img> находится в DOM, но height неизвестно до тех пор, пока изображение не загрузится (если это явно не установлено из CSS).Решение - запросить высоту в onLoad.См тест ниже:

class Test extends React.Component {
  componentDidMount() {
    //console.log(this.refs.img.getBoundingClientRect().height);
    console.log('componentDidMount', this.refs.img.clientHeight);
  }
  imageLoaded = () => {
    console.log('imageLoaded', this.refs.img.clientHeight);
  }
  render() {
    return <img src="http://placekitten.com/200/200" 
                ref="img"
                onLoad={this.imageLoaded}
                />;
  }
}

ReactDOM.render(<Test />, document.getElementById('app'));

<script src="http://unpkg.com/react/umd/react.production.min.js"></script>
<script src="http://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<div id="app"></div>