height of div would take equal to image height mean while image is loading.

[vishwakarmanikhil]

height of div would take equal to image height mean while image is loading.

[samwyzz]

For this, one way is the bottom padding technique. This will of course require knowing before hand the width and height of the image to calculate the images aspect ratio in percent. That is, how much percent is the images height compared to its width. For example, say, an image Is a "tall" image, then its height would be maybe 150% more than its width. This is just an example, and the dimensions will of course vary from image to image.

We apply a padding bottom to a container div which contains the image element, calculated from the images width and height . So while the image has not loaded the height of the container div is proportionate to the actual image when it has loaded.

function myImageComponent({imageWidth, imageHeight}){
   const aspectRatioPercent = (imageHeight/imageWidth)*100;
   return (
   <div style={{
      paddingBottom: `${ aspectRatioPercent }%`,
      backgroundColor: "red"
     }}
   >
      <img src={...} />
   </div>
   )
}

The following articles explain this concept in more depth:
https://www.andyshora.com/css-image-container-padding-hack.html
https://css-tricks.com/aspect-ratio-boxes/

A little short of time atm, this example is a little bit rushed and im sure there are things that can be improved. If this is useful and need any help, feel free to ask.

Edit: in this example the img element must be positioned absolutely otherwise it will add to the height of the cell once loaded

[vishwakarmanikhil]

@samwyzz Thank you for an update. I have tried your solution but It was not what I am looking for. Because if for small things we start using the libraries then it increases the build size anyway. I have found this on stack overflow and use that. But anyway you have elaborate your solution problem clearly. which helps me to found the solution.

[vishwakarmanikhil]

Thank you @samwyzz , I will try this.

[samwyzz]

@vishwakarmanikhil
As it showed in the example above before editing, I have clearly never been a math expert :p. And to add I was severely burned-out when writing my comment. Now that I look at it, the hook I had created above had a redundant calculation of the image ratio. The calculate aspect ratio package is not necessary since the width and height of the image are the aspect ratio.

The padding percentage can simply be calculated using the following formula (Image Height / Image Width) * 100. It is still required to know the width and height before hand.

I have updated my answer with the corrections.

Cheers!