How to get image height and give that height to image div to make it responsive

Question

I want to give image height to image main div to make it fit inside div like below is image which height is 186px so i want to give that image height to main div to make them fit. Is there any want to get image height which i mark in below image.

As there is a solution but that is working fine as it giving another height.

 var img = new Image();
 img.src = this.props.image;
 console.log(img.height) // it give me 406 not 186

This is what is my problem and what i want.

Answer 1

Yeah,you can get image height by accessing img.naturalHeight ,same goes for width as well but u have to wait for browser to download image (use onload event and access once image loaded) .u can find aspect ratio and make your div responsive or apply it's original width and height. Happy coding.